午后・时光

《魂引》贴子说明

位置: 首页 > 马黑教程[ 发布时间: 2024.6.29  作者: 花飞飞  阅读: 112 ]


本帖:
(一)利用元素 animationend 事件实现对小播CSS关键帧动画进行管理,得出一静一动的动画效果。原理请查阅:

CSS关键帧动画之圆周运动演示 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! (huachaowang.com)

不同的是,这里的动画使用相抵路径(offset-path)实现,通过 @keyframes 创建四个不同方向的运行路线(都在路径上,两两衔接)。元素在路径上的运行距离以 offset-distance 表示,支持百分比,路径变长变短均能适应。


动画除了路径动画,还有旋转与色相变化,均在每一个 @keyframes 属性中一并设定。


(二)关于小球:JS代码中,需要一个数组管理小球。该数组会在联动控制函数和小球的点击事件中用上。


(三)关于相抵路径、动画运行周期时长适应全屏或窗体其他尺寸动态变化


由于相抵路径的 path 的数据是像素单位,视口尺寸变化时只能动态调整。window.onresize 事件中,以比例方法对二次贝塞尔曲线的终点和控制点进行测算,终点X坐标 = mydiv.offsetWidth - 40,40是小球的尺寸要减去;控制点X坐标 = mydiv.offsetWidth / 2;Y坐标 = mydiv.offsetHeight * 2 - 200,参照了原始相抵路径的设计;animation-duration 即运行周期时长的计算复杂一些:

((mydiv.offsetWidth + mydiv.offsetHeight) / (1024 + 640)) * 6

这是采用比例方法设计的算式:((宽+高)÷(原始宽 +原始高))× 6,6 是原生动画在 1024*640尺寸下的运行周期时长。这是大致的测算,科学的方法是重新计算曲线长度,这太复杂,做个简单的帖子用不着这么认真。

前一篇: Wave in Dream贴子说明
下一篇: 在canvas画布中绘制三次贝塞尔曲线

发表评论:

       

评论列表 [0条]

Copyright © 2014 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com