JS原生animate动画之：编写自己的动画(续篇)

南无月

这个位置变化。。
数组包裹对象，对象包裹数组
看哪个教程的时候，
当下看的那个教程都会更加清晰一些。。

南无月

对等功能的数组包裹对象代码里没有滤镜代码~~老师这里功能不等了。。

马黑黑

南无月 发表于 2024-6-15 22:02
对等功能的数组包裹对象代码里没有滤镜代码~~老师这里功能不等了。。

忘了放了。对应语句分别加上滤镜就可以了：

const kfs = [
    { transform: 'rotate(0)', left: '0', top: '0', filter: 'hue-rotate(0)' },
    { top: '0' },
    { transform: 'rotate(360deg)', left: '640px', top: '320px', filter: 'hue-rotate(360deg)' },
];

马黑黑

南无月 发表于 2024-6-15 21:56
这个位置变化。。
数组包裹对象，对象包裹数组
看哪个教程的时候，

哪一种都可以的，理工科的会觉得第二种更好

南无月

马黑黑 发表于 2024-6-15 22:21
哪一种都可以的，理工科的会觉得第二种更好

昨天看的时候觉得昨天那个写死数据的挺好的。。
今天看的时候觉得今天这个凑在一块的也挺好。。

哎，对了，
今天怎么没给个通用数据的公式呀。白老师。。

南无月

马黑黑 发表于 2024-6-15 22:20
忘了放了。对应语句分别加上滤镜就可以了：

const kfs = [

这个太好了，滤镜直接挂在角度和位置后面就行。。

马黑黑

南无月 发表于 2024-6-15 22:54
这个太好了，滤镜直接挂在角度和位置后面就行。。

第一种方法，理论上是每一个 {} 描述完所有的属性，有部分可以省略

马黑黑

南无月 发表于 2024-6-15 22:53
昨天看的时候觉得昨天那个写死数据的挺好的。。
今天看的时候觉得今天这个凑在一块的也挺好。。

这个简单，可以参考昨天的那个弄弄就成

红影

马黑黑 发表于 2024-6-15 17:50
二者：

数组包裹对象：每一个 {} 里所描述的，是对应关键帧的所有属性的集合，依据时间线综合陈述关键 ...

“对象包裹数组，在时间线上不能直观看到运动对象的变化结果”
这个是最根本的原因，所以我属于绝大多数人的习惯，倾向于数组包裹对象

红影

马黑黑 发表于 2024-6-15 17:52
就是像传统的文学创作一样，平铺直叙，一切了然于胸

虽然缺少点跌宕起伏，但一切都在掌握中

红影

马黑黑 发表于 2024-6-15 17:55
这可能是先入为主的效应吧。就像电影、电视剧翻拍，由于前一个版本已经深入人心，后面的版本再怎么优秀都 ...

黑黑说得还真有道理，我好不容易才理解了前面的，后面的再怎么优秀，都不敢尝试，生怕hold不住

马黑黑

红影 发表于 2024-6-16 11:02
虽然缺少点跌宕起伏，但一切都在掌握中

所以说你的思维更像是文科生

马黑黑

红影 发表于 2024-6-16 11:01
“对象包裹数组，在时间线上不能直观看到运动对象的变化结果”
这个是最根本的原因，所以我属于绝大多数 ...

第二种方法需要一点形象思维能力。这能力大家都有，只是有的人不愿意使用，慢慢地就自认为没有了。

南无月

马黑黑 发表于 2024-6-15 22:58
第一种方法，理论上是每一个 {} 描述完所有的属性，有部分可以省略

我还是省省吧，原样照抄下来就不错，省略部分还是算了。

南无月

马黑黑 发表于 2024-6-15 22:58
这个简单，可以参考昨天的那个弄弄就成

看了一下，我还是算了吧

马黑黑

南无月 发表于 2024-6-16 11:35
看了一下，我还是算了吧

涉及到需要父元素宽高的地方，用变量去替换，这和幼儿园小班代数是一样一样的

亚伦影音工作室

整个页面都动了，咋回事

马黑黑

亚伦影音工作室 发表于 2024-6-16 12:42
整个页面都动了，咋回事

这个现象不好理解。理论上，示例的效果仅作用于一楼的子元素。你刷新看看，或检查一下浏览器缓存是不是内容太多出现混乱了

亚伦影音工作室

马黑黑 发表于 2024-6-16 12:49
这个现象不好理解。理论上，示例的效果仅作用于一楼的子元素。你刷新看看，或检查一下浏览器缓存是不是内 ...

第二页不动，首页动你厉害！我是手机浏览的，电脑还没顾上看！

马黑黑

亚伦影音工作室 发表于 2024-6-16 13:43
第二页不动，首页动你厉害！我是手机浏览的，电脑还没顾上看！

手机浏览器Chromium版本很低，对很多标准接口支持度不够甚至不支持。建议安装手机版的chrome或Edge，分分钟支持新标准