浅谈关于html5中图片抛物线运动的一些心得


Posted in HTML / CSS onJanuary 09, 2018

常见的, 物体/图片做抛物线或者更准确的说是沿贝塞尔曲线运动是H5开发中常见的需求, 那么如何快速的根据设计稿计算出运动路径是开发者首要解决的问题.

我这边H5开发常用的设计稿尺寸是640 * 1008, 那么根据这个尺寸解决方案思路如下:

1, 首先将PS中要位移的元素单独导出一张png, 如果设计稿中已经规划好了运动路线的话也需要将该路线导出为png;

2, 在AI中新建一个和设计稿尺寸一样的文件,再将位移元素分两次拖入该文件中, 如果有运动路线的话也拖入进去,如下所示:

浅谈关于html5中图片抛物线运动的一些心得

这里需要注意的是位移图片的摆放位置, 路径的起点和终点应该对应着图片的移动点.对应的情况有如下几种:

  1. canvas中不做变形处理, 那么移动点就是图片的左上角
  2. canvas中, 图片做了translate移动, 因根据translate(x1, y1)中的x1, y1去加上drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)中dx和dy的最终偏移.
  3. 如果元素通过position:absolute定位, 并通过transform中translate3d(x, y, z)来控制位置的话,偏移量应该是x, y. 通常的, transform中我们有可能模仿 left, top和额外的margin来控制元素的位置, 在transform中额外的添加一个translate3D(marginLeftX, marginLeftY, 0). 也需要把这个margin的值考虑进去.

3, 在AI中通过ctrl + r键拉出参考线, 在元素图片的移动拉出其x, y的位置, 如下图所示:

浅谈关于html5中图片抛物线运动的一些心得

然后选择钢笔工具, 先后在起点和终点处点击, 在点击终点后鼠标不要松开, 直接拖动AI会自动添加2个控制点. 通过移动鼠标可以调整两个控制点的位置, 从而达到调整钢笔工具所生成的路径的目的, 直到和设计稿上的参考线路径一致.如下所示:

浅谈关于html5中图片抛物线运动的一些心得

拖到想要的位置后, 松开鼠标, 键盘回车确定路径, 如果所勾勒的路径不合心意还可以继续拖动控制点以作调整.

4, 在调整完毕后, 额外的拖动两条参考线到控制点1的位置, 然后通过 菜单栏 -- 窗口 -- 信息, 打开信息面板, 分别将起点, 控制点, 终点, 3个点的坐标取出来.

5, 分别计算控制点, 终点和起点的像素差, 根据H5中要位移的图片的真实x, y的坐标值和像素差做计算得出真实的控制点, 终点坐标. 再将这三个坐标点应用于公式中即可.

复制代码
代码如下:

var path = getBezierPath([278 + 119, 572 - 32], [ 278 - 4, 572 - 137] , [278 + 119, 572 - 32] , [278, 572], 50);

其中, 参数分别是getBezierPath(终点, 控制点1, 控制点2, 起点, 运动次数), 如果没有控制点2, 直接讲终点的坐标填进去即可._getBezierPath最终公式如下:

function getBezierPath(p1, p2, p3, p4, times) {
    function Point2D(x,y){  
        this.x = x || 0.0;  
        this.y = y ||0.0;  
    }  
    
    function PointOnCubicBezier( cp, t ) {  
        var   ax, bx, cx;  
        var   ay, by, cy;  
        var   tSquared, tCubed;  
        var   result = new Point2D ;  
        cx = 3.0 * (cp[1].x - cp[0].x);  
        bx = 3.0 * (cp[2].x - cp[1].x) - cx;  
        ax = cp[3].x - cp[0].x - cx - bx;        
        cy = 3.0 * (cp[1].y - cp[0].y);  
        by = 3.0 * (cp[2].y - cp[1].y) - cy;  
        ay = cp[3].y - cp[0].y - cy - by;        
        tSquared = t * t;  
        tCubed = tSquared * t;        
        result.x = (ax * tCubed) + (bx * tSquared) + (cx * t) + cp[0].x;  
        result.y = (ay * tCubed) + (by * tSquared) + (cy * t) + cp[0].y;        
        return result;  
    }  
    function ComputeBezier( cp, numberOfPoints, curve ){  
        var   dt;  
        var   i;        
        dt = 1.0 / ( numberOfPoints - 1 );  
         for( i = 0; i < numberOfPoints; i++)  
            curve[i] = PointOnCubicBezier( cp, i*dt );  
    }  
      
    var cp=[  
        new Point2D(parseInt(p4[0]), parseInt(p4[1])), new Point2D(p2[0], p2[1]), new Point2D(p3[0], p3[1]), new Point2D(p1[0], p1[1])  
    ];  
    var numberOfPoints = times;  
    var curve=[];  
    ComputeBezier( cp, numberOfPoints, curve );  
    return curve;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3中border-radius属性设定圆角的使用技巧
May 10 HTML / CSS
利用CSS3的checked伪类实现OL的隐藏显示的方法
Dec 18 HTML / CSS
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 HTML / CSS
基于CSS3实现的漂亮Menu菜单效果代码
Sep 10 HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
Mar 10 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
五个2015 年最佳HTML5 框架
Nov 11 HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 HTML / CSS
HTML5实现桌面通知 提示功能
Oct 11 HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
May 28 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
Jan 08 #HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 #HTML / CSS
详解基于canvas的视频遮罩插件
Jan 04 #HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 #HTML / CSS
canvas 阴影和图形变换的示例代码
Jan 02 #HTML / CSS
canvas仿写贝塞尔曲线的示例代码
Dec 29 #HTML / CSS
Canvas绘制浮动球效果的示例
Dec 29 #HTML / CSS
You might like
用PHP动态生成虚拟现实VRML网页
2006/10/09 PHP
PHP中spl_autoload_register函数的用法总结
2013/11/07 PHP
php实现图片缩略图的方法
2016/03/29 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
JavaScript中json使用自己总结
2013/08/13 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
html5+javascript制作简易画板附图
2014/04/25 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
Javascript技术难点之apply,call与this之间的衔接
2015/12/04 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
详解node.js 下载图片的 2 种方式
2018/03/02 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
vue实现路由监听和参数监听
2019/10/29 Javascript
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
pandas Dataframe行列读取的实例
2018/06/08 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
python 动态调用函数实例解析
2019/10/21 Python
如何基于python测量代码运行时间
2019/12/25 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
Python如何使用input函数获取输入
2020/08/06 Python
django中cookiecutter的使用教程
2020/12/03 Python
Casadei卡萨蒂官网:意大利奢侈鞋履品牌
2017/10/28 全球购物
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
怎样从/向数据文件读/写结构
2014/11/23 面试题
期中考试后的反思
2014/02/08 职场文书
门店业绩提升方案
2014/06/08 职场文书
事业单位人员的自我评价范文
2014/09/21 职场文书
坚持不是死撑,更重要的是心态
2019/08/19 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书
Python基础之tkinter图形化界面学习
2021/04/29 Python