1、选中某个元素,例如:图片,点动画菜单——自定义动画;
2、点添加效果——进入——选择一种动画效果。
css3之前,想要改变某个元素的位置,常用的方法是通过绝对定位改变其left或是top。而现在,由于css3新增加了transform属性,也可以通过改变translate来实现元素位置的变化。
制作改变某个元素位置的动画效果,尤其是在移动端上,如果使用left或者top,会出现明显的卡顿,在配置较低的手机上甚至会产生重影的现象。而改用translate,元素的运动效果则会变得相对流畅许多,且不会产生重影。
因为用left或top时,在每一帧内,cpu (中央处理器) 都需要计算该元素的其他样式,特别是相对需要复杂计算的盒阴影,渐变,圆角等样式,最后都需要将这些样式应用到该元素内。从这个角度看,如果对于较为老旧的移动设备进行相对复杂的动画,那么效果肯定不理想。
而通过调用translate,会启动硬件加速,即在GPU层 (图形处理器) 对该元素进行渲染。这样,CPU就会相对解放出来进行其他的计算,GPU对样式的计算相对较快,且保证较大的帧率。我们可以通过2d和3d的transform来启用GPU计算。
通过console.log可以看到,transform的值是一个矩阵:
其中第5个数字和第6个数字分别对应translateX和translateY。
获取这个值的方法有三种,例如我们要获取slider-bar这个元素的translateX值:
方法1--解析矩阵:
WebKitCSSMatrix是专门用于 *** 作矩阵的函数。而m41就是translateX值,其中4代表第4列,1代表第一行。所以如果你还想获取translateY的值,就用m42。
方法2--正则:
方法3--字符串分割:
用typeof查看矩阵的类型,结果为字符串(string),所以也可以用字符串的方法split来分割。
当元素的display为none时,是获取不到transform的,设置如下样式
得到的结果为
所以在使用一些插件时,如果插件会将元素的display设置为none,那么就只能获取其他数值来替换transform的值。
1、ppt里面的动画效果是根据路径来实现位置的移动,可以通过ppt自身的功能来实现动画。
2、打开PPT,创建一个形状并选中这个你要添加动画效果的单元格。
3、打开【动画】选项卡。
4、在动画选项卡下的最下方找到【动作路径】。
5、选择其中的路径或者自定义就可以了。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)