续….

5. head块:学会旋转,知道什么叫做变形原点。

效果:小方块在顶部从左向右运动,停下来后向下延伸,变成小方块,再绕着左上角的点,顺时针旋转90°,变成水平。

操作:默认的变形原点是X:50%, Y:50%,就是图形的中心点,如图,将它的值改成X:0%, Y:0%,这样就可以将原点设置到左上角。颜色:#9799b1。可以看出,实现这个效果,是需要3段的变化,前两段和bottom的一样,最后一段的旋转设置,在变形后最后一帧设置rotate也就是旋转的关键帧,再在想其结束的时候设置结束关键帧,手动输入90°,变化方法设置和变形移动没什么区别。

6. right块:如图,形状如小山的块,设置动态效果。图片导入。

效果:由下向上移动。跃跃欲动的效果,就是“easeInBounce”最后停止
操作:用photoshop建立一个椭圆的部分,背景透明。点击edge中,file—-import,导入这个png,关掉自动关键帧属性,设置好位置,设置移动效果,由下到上。点击时间轴上的效果,在easing里面旋转“easeInBounce”,实际是在实现这些效果的时候可以与其他效果叠加用以实现更深入效果。

7. logo块:学会inverted paste,就是效果的反向粘贴。

效果:logo图标慢慢呈现,到完全出现之后,放大到150%再还原,变形再还原,再倾斜,再还原。

操作:3个变化值,3段的操作,首先,透明到出现,就是透明值由0%到100%变化,过程简单,不说了。第二段,变形,也就是scale的值,分别X,Y设置各方向形变,以图形中心向两边延伸,按一般方法设置好之后标尺放在最后,复制这个形变的效果,选择菜单栏的edit—inverted paste,看一下就会在原来的效果基础上实现还原,同理设置skew也就是倾斜,再还原。

我写这个例子是介绍使用,所以难免制作简陋。但绝对100%原创

参考地址为:

例子包下载地址:

谨记:浏览器需要支持HTML5+CSS5

(转载请注明来自https://www.ccjk.com/blog/cn/)