评论资讯 [ 总 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条]
