评论资讯 [ 总 861 则 ]
·mark - 2024-9-7 23:56
·悄然 - 2024-9-2 21:52
·马黑 - 2024-9-2 20:57
·马黑 - 2024-9-1 23:17
·飞飞 - 2024-8-28 18:42
·马黑 - 2024-8-28 18:39
·马黑 - 2024-8-26 19:22
·马黑 - 2024-8-26 08:24
·飞飞 - 2024-8-20 08:51
·马黑 - 2024-8-19 23:56
·悄然 - 2024-9-2 21:52
·马黑 - 2024-9-2 20:57
·马黑 - 2024-9-1 23:17
·飞飞 - 2024-8-28 18:42
·马黑 - 2024-8-28 18:39
·马黑 - 2024-8-26 19:22
·马黑 - 2024-8-26 08:24
·飞飞 - 2024-8-20 08:51
·马黑 - 2024-8-19 23:56
友情链接
网站统计
《魂引》贴子说明
本帖: (一)利用元素 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条]