css 多个关键帧变形如何衔接

Posted 2023-05-09

参考技术A 源代码下载
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom，容器中包含 10 个 p 子元素，每个 p 中包含 1 个 span 元素：
居中显示；
定义容器的尺寸和样式；
画出容器里的 1 个元素，它有一个外壳 p，里面是一个白色的小方块 span；
为容器中的元素定义下标变量，并让元素的外壳依次旋转，围合成一个圆形，其中 outline 是辅助线；
至此，子元素绘制完成，接下来开始写动画脚本。

到底啥是动画关键帧啊

所谓动画关键帧，就是给需要动画效果的属性，准备一组与时间相关的值，这些值都是在动画序列中比较关键的帧中提取出来的，而其他时间帧中的值，可以用这些关键值，采用特定的插值方法计算得到，从而达到比较流畅的动画效果。

任何动画要表现运动或变化，至少前后要给出两个不同的关键状态，而中间状态的变化和衔接电脑可以自动完成，在Flash中，表示关键状态的帧动画叫做动画关键帧。

扩展资料：

实现动画关键帧的三个类：

1、AnimationTrack：

是一个集合类（Composition），用来将AnimationController、KeyframeSquence和一个特定属性（Target Property）捆绑起来，这种结构也使得同一个AnimationController和KeyframeSquence可以被不同的关键帧动画复用。

在每一个Object3D对象中，通过addAnimationTrack和removeAnimationTrack方法，管理一组AnimationTrack序列；当使用animate方法，计算该Object3D对象关键帧动画时，所有在序列中的AnimationTrack都会被依次计算。

此外若该Object3D对象有到其他Object3D的引用，则所有引用的Object3D的animate方法也会被依次执行。

2、AnimationController：

通过指定采样点和采样速度，实现从WorldTime到SquenceTime的映射，从而控制动画的播放效果，如：暂停，继续，快进、倒退等。

3、KeyframeSquence：

用来保存所有的关键帧的值，同时指定关键帧循环的方式，以及计算时的插值方法。

参考技术A

出自《回忆中的玛妮》是由吉卜力工作室出品的日本动画电影，影片于2014年7月19日在日本首映。该片由米林宏昌执导，丹羽圭子参与配音 。

该影片剧情改编自英国小说家琼安·G·罗宾森的儿童文学作品，讲述女主人公安娜与少女玛妮之间一个动人的故事。

安娜和养父母生活在一起，她没有一个朋友，是个自卑而孤独的小姑娘。后来的一个夏天，安娜被送到了诺福克，和老佩吉夫妇一起生活。在这个海边的村子里，安娜认识了同龄的女孩玛妮。

她们成了好朋友，一起玩耍，一起谈笑。玛妮让安娜脱离了孤独，学会了交朋友。然而，突然有一天，玛妮消失了。但村子里没有一个人知道玛妮的存在。

吉卜力工作室介绍：

吉卜力工作室，是一家日本动画工作室。成立于1985年中旬，原附属于德间书店，位于日本东京都近郊的小金井市，目前约有300名员工，由导演宫崎骏以及他的同事高畑勋、铃木敏夫等一起统筹，作曲家久石让也为吉卜力工作室的许多作品制作过电影音乐。

工作室标识为其代表作品《龙猫》。

985年6月15日，制作《风之谷》的团队“トップクラフト（Top Craft）”在德间书店出资帮助下，正式转型为吉卜力株式会社。

参考技术B 计算机动画术语， 帧——就是动画中最小单位的单幅影像画面，相当于电影胶片上的每一格镜头。在动画软件的时间轴上帧表现为一格或一个标记。关键帧——相当于二维动画中的原画。指角色或者物体运动或变化中的关键动作所处的那一帧。关键帧与关键帧之间的动画可以由软件来创建，叫做过渡帧或者中间帧。
关于flash的应用：在flash中，每个关键帧都可以被赋予更多的用途。其中，关键帧的用途有分为：普通关键帧（用于处理图形图像和动画）；动作脚本关键帧（用于存放动作脚本，关键帧可以通过动作脚本控制flash影片和其中的影片剪辑）；
关键帧的概念来源于传统的卡通片制作。在早期Walt Disney的制作室，熟练的动画师设计卡通片中的关键画面，也即所谓的关键帧，然后由一般的动画师设计中间帧。在三维计算机动画中，中间帧的生成由计算机来完成，插值代替了设计中间帧的动画师。所有影响画面图象的参数都可成为关键帧的参数，如位置、旋转角、纹理的参数等。关键帧技术是计算机动画中最基本并且运用最广泛的方法。另外一种动画设置方法是样条驱动动画。在这种方法中，用户采用交互方式指定物体运动的轨迹样条。几乎所有的动画软件如Alias、Softimage、Wavefront、TDI、3DS等都提供这两种基本的动画设置方法。
从原理上讲，关键帧插值问题可归结为参数插值问题，传统的插值方法都可应用到关键帧方法中。但关键帧插值又与纯数学的插值不同，它有其特殊性。一个好的关键帧插值方法必须能够产生逼真的运动效果并能给用户提供方便有效的控制手段。一个特定的运动从空间轨迹来看可能是正确的，但从运动学或动画设计来看可能是错误的或者不合适的。用户必须能够控制运动的运动学特性，即通过调整插值函数来改变运动的速度和加速度。为了很好地解决插值过程中的时间控制问题，Steketee等提出了用双插值的方法来控制运动参数。其中之一为位置样条，它是位置对关键帧的函数；另一条为运动样条，它是关键帧对时间的函数。Kochanek等提出了一类适合于keyframe系统的三次插值样条，他们把关键帧处的切矢量分成入矢量和出矢量两部分，并引入三个参数:张量t、连续量c和偏移量b对样条进行控制。该方法已在许多动画系统中得到了应用。
从原理上讲，关键帧插值问题可归结为参数插值问题，传统的插值方法都可应用到关键帧方法中。但关键帧插值又与纯数学的插值不同，它有其特殊性。一个好的关键帧插值方法必须能够产生逼真的运动效果并能给用户提供方便有效的控制手段。一个特定的运动从空间轨迹来看可能是正确的，但从运动学或动画设计来看可能是错误的或者不合适的。用户必须能够控制运动的运动学特性，即通过调整插值函数来改变运动的速度和加速度。为了很好地解决插值过程中的时间控制问题，Steketee等提出了用双插值的方法来控制运动参数。其中之一为位置样条，它是位置对关键帧的函数；另一条为运动样条，它是关键帧对时间的函数。Kochanek等提出了一类适合于keyframe系统的三次插值样条，他们把关键帧处的切矢量分成入矢量和出矢量两部分，并引入三个参数:张量t、连续量c和偏移量b对样条进行控制。该方法已在许多动画系统中得到了应用。本回答被提问者采纳