wx小程序动画Animation和Css帧动画

Posted 2023-04-30

参考技术A

简单总结一下微信动画的实现及执行步骤。
实现方式官方文档是这样说的：
①创建一个动画实例 animation。
②调用实例的方法来描述动画。
③最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性 ...

注意:

前两步是定义一个动画并设置都要干什么，然后把这个设置好的“规则”扔给界面上的某个元素，让它按照这个规则执行。

当然如果有多个元素的animation="ani"，也都会执行这个动画规则。

简单介绍一下例子中的几个参数和方法（其他的详见官方文档）：

首先需要定义一套关键帧，关键帧的定义方式比较特殊，它使用了关键字@keyframes来定义动画。这里可以用fromto或者用百分比充当时间点。具体格式为：

然后，在需要设置动画的相应的标签里，调用动画就可以了
比如需要给div添加动画效果：
div
animation：1s 2s 动画名称 运动方式 动画执行的次数

详细分析：
首先 wxml 中 pupContent 初始化信息为高度为0 display: 为 none click 为 false
， click 这个来判断 display: 为 block 还是为 none （即： block 为换行显示， none 为不显示，把视图隐藏了） option 用来判断是否调用打开的动画，或者关闭的动画

第一次点击 click 变为 true option 变为 true 这时候 pupContent 的 display: 为 block 高度由动画变为 800rpx

第二次点击阴影部分 首先设置了 option 为 false option 为 false 的话先走的动画是 pupContent 由 800 的高度变为 0 .然后在设置click为false就隐藏掉了

Unity 动画系列一 属性动画 序列帧动画

参考技术A 参考
Unity动画系统详解1：在Unity中如何制作动画？
Unity 动画系统 Animation 和 Animator的小实例
Unity/Animation -- 创建Animation Clip

空场景，找到一张Sprite图片，拖到面板中，右键添加Animation组件。如下：

选中图片，点击Unity的 Window->Animation->Animation。注意确认提示中的To begin animation后面的名称，是不是自己要添加的动画目标

这里发现只有Position.z，原因我暂时没搞清楚。而换成3D物体，菜单就是这样的了

这里可以创建另外一个ani

与方式一不同的是，不要先添加Animation组件，直接Window--Animation--Animation，命名保存后，会出现2个文件：

看起来是引擎自动生成了twoImage.controller控制器，也就是Animator组件，而不是方式一中的Animation组件。创建动画保存后运行，发现动画已经生效了。再创建一个动画twoAni2，然后点击Window--Animation--Animator，来观察Animator视图：

橙色的待机动画是初始状态，其他状态都需要从这里出发，也都能回到这里。每个灰色矩形的状态表示一种动画，箭头连线表示状态切换方向。(关于状态机，后面还会详细说。)

使用Make Transition可以将twoAni2也连接上，这样播完twoAni1后，会播放twoAni2。在这个面板上，双击twoAni1或twoAni2，也可以直接 进入动画编辑窗口。默认的twoAni2一直在循环播放，可以在资源管理窗口找到它，然后把Loop time勾掉

参考
Unity 动画系统 Animation 和 Animator 联系与区别

在unity的老版本中我们只有Animation组件，在4.6版本以后则增添了Animator组件，如果只是控制一个动画的播放我们则用Animaton组件，如果是很多动画之间相互转换则使用Animator组件，它们两者的区别就是Animator有一个动画控制器（俗称动画状态机），使用它来进行动画切换是非常方便的，但缺点是占用内存比Animaton组件大。

要注意的是Animator Controller和Animation Clip都是文件（File），Animator则是GameObject上的一个组件（Component），不能混为一谈。

Animation窗口有两种模式：录制模式和预览模式。

点击录制按钮后，就进入了录制状态。此时关键帧部分会变成红色。

在录制模式下，不管是在场景中移动、旋转、缩放物体，还是在Inspector面板中修改物体组件的属性（Unity动画支持的属性），Unity都会自动在动画Clip的当前时间上添加关键帧保存。

我们可以在Animation窗口中拖到自己想添加关键帧的地方，然后回到scene场景中修改物体的属性，反复重复这样的步骤，然后退出录制状态，就自动生成想要的动画了。

如果没有在录制模式下，对物体的修改不会自动记录到动画Clip中。如果需要记录，需要手动添加关键帧进行记录。

如果在Inspector中修改了物体的属性，物体的属性会从浅蓝色背景变为浅红色，代表该属性已经被修改。这时候你可以右键点击对应的属性，在弹出菜单中点击Add Key即可添加关键帧，将该属性的数据保存到动画Clip中。如果你在当前帧修改了多个属性，可以点击菜单中的Key All Modified（将所有修改的属性记录关键帧）或Key All Animated（记录属性列表中所有属性的数值，即使与上一帧相同数值的属性也会被记录）来一次性将所有修改的属性保存。

也可以点击Animation窗口左侧的Add Keyframe按钮来记录当前属性列表中选中属性的关键帧，如果当前没有选中任何属性，则会记录所有属性。

默认情况下，Animation窗口是DopeSheet模式，显示的是关键帧的点。如果想只使用Dopesheet实现比较好的动画效果还是比较困难的，因为它并不能直观地反映参数随时间变化的函数。这时我们可以在Animation窗口左下角切换到Curves视图, 具体效果如下图

如图，这是一个很简单的Rotation动画，只有X在第43帧变为75.634。
将鼠标移到紫色点处，会变成可以移动的四角形，可以直接调节动画效果：

此时返回dopesheet视图，发现关键帧和数值都被改变了

编辑关键帧时，可以多选（在Curve编辑中同理）：

你会发现直接拖拽多个关键帧时，后方的关键帧并不会跟随这些关键帧移动。如果你想让后方的关键帧也跟着移动，可以按住R键，同时拖拽这些关键帧。这种编辑方式叫做Ripple Edit（在音视频编辑软件中很常见）。缩放同理。

点击属性视图中Position属性左侧的三角标识，可以展开显示Position.x, Position.y, Position.z的属性。现在选中绿色的那个，去控制y属性。

如果模拟上下跳动的效果，我们可以在动画所有采样点的中点处设置一个Key，表示弹跳的最高点。先在0:30处鼠标右键Add key添加一个关键点，然后鼠标左键按住并沿Y轴拖拽来改变该点的Position.y的值。

如下图，添加了两个key,并且Position.y设置为1，中间一段一直为1，多一点跳到高处的滞留时间。

将两侧都改为Linear后，变成了这样，注意那个勾从Clamped Auto变成Broken

在Curves中预定义了五种不同的Key点切线类型，它们分别是：

Evnet事件帧会在游戏运行时，场景中的物体在Animator的控制下，播放该动画片段到对应位置时，触发该物体上的某个脚本中的一个可以作为AnimationEvent挂载的方法

给触发动画的物体挂个脚本后，在事件帧上就能选方法了

参考
unity动画之帧动画使用

这时会提醒你保存一个动画，保存在Assets中/effect/explosionSmoke中，命名为explosionSmoke，保存动画即可 。

可以根据需要，调整Samples值。这样，帧动画就实现了。

可以参考 Unity UGUI系列二 图片 SpriteRenderer和Image
通过观察，上面步骤做出的动画是拖到场景里，使用SpriteRenderer完成的。如果我们想在Canvas下，使用Image制作也是可以的。