评论资讯 [ 总 916 则 ]
·马黑 - 2024-12-26 12:14
·马黑 - 2024-12-24 22:59
·飞飞 - 2024-12-24 22:08
·马黑 - 2024-12-19 08:19
·马黑 - 2024-12-16 23:53
·马黑 - 2024-12-15 22:34
·马黑 - 2024-12-14 23:53
·马黑 - 2024-12-13 18:38
·悄然 - 2024-12-7 06:47
·马黑 - 2024-12-5 23:17
·马黑 - 2024-12-24 22:59
·飞飞 - 2024-12-24 22:08
·马黑 - 2024-12-19 08:19
·马黑 - 2024-12-16 23:53
·马黑 - 2024-12-15 22:34
·马黑 - 2024-12-14 23:53
·马黑 - 2024-12-13 18:38
·悄然 - 2024-12-7 06:47
·马黑 - 2024-12-5 23:17
友情链接
网站统计
《魂引》贴子说明
本帖: (一)利用元素 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条]