Animation全接触（2）：ParentAnimation模型

最新推荐文章于 2023-04-13 23:43:22 发布
最新推荐文章于 2023-04-13 23:43:22 发布
阅读量95 收藏
点赞数
原文链接：https://yq.aliyun.com/articles/405775
版权
ParentAnimation，顾名思义，是一组Animation的父亲，是所有需要包含其它Animation的父类，我们熟悉的 ParallelAnimation（并行动画）和SequenceAnimation（顺序动画）都是它的子类。从这个概念上来说，这也是个非常经典的 Composit模式应用。ParentAnimation相关的UML类图如下：

构造函数：
  • ParentAnimation：比Animaion类的构造函数多一个Animation数组作为参数，作为初始化的子Animation对象。
属性：
  • animations：只读属性，Array类型。返回所有当前的子Animation。
方法：
  • add：添加一个子Animation对象。
  • clear：清除并销毁所有子Animation对象。
  • dispose：销毁当前ParentAnimation对象。
  • initialize：初始化当前ParentAnimation对象。
  • remove：删除并销毁指定的子Animation对象。
  • removeAt：删除并销毁指定下标的子Animaion对象。
　　ParentAnimation在Animation基础上添加了一些集合操作的方法。
　　在ParentAnimation的构造函 数中，会得到一个数组，存放了初始情况下所有的子Animation对象，它们会被依次调用add方法添加到ParentAnimation自己维护的数 组中。而在ParentAnimation的initialize方法中，会确定每个子Animation有没有被初始化，如果没有，则调用它的 initialize方法。
　　值得注意的是，像remove， removeAt和clear这些删除子Animation的方法中（也包括dispose方法，它调用了clear方法），除了从 ParentAnimation维护的数组中去除子Animation对象之外，还会将其销毁（调用其dispose方法），因此您再也无法使用这个子 Animation对象了。
　　在ParentAnimation的add方法有个特别的地方，它是这样的实现的：
ParentAnimation的add方法 
add : function(animation) {
if (this._animations) {
if (animation) {

animation._parentAnimation = this;

}
Array.add(this._animations, animation);
this.raisePropertyChanged('animations');

}

}
 
　　可以看到，add方法在传入的animation对象中添加了一个_parentAnimation引用指向自己。那么_parentAnimation的作用是什么呢？这就要细化到我们在上一篇文章中的Animation模型了。
　　关键在于Animation类的target属性，这是它的实现：
Animation类的target属性 
get_target : function() {
if (!this._target && this._parentAnimation) {
return this._parentAnimation.get_target();

}
return this._target;

}
 
　　在target属性的getter中，如果 发现当前Animation没有指定target，它则会设法通过_parentAnimation引用来寻找父Animation，并使用父 Animation的target属性指定的对象。因此，我们可以仅仅在父Animation中指定target，它的所有子Animation就能统一 对同一个对象进行操作了。
　　ParentAnimation是一种比较 特别的Animation对象，因为它的作用是“组织和管理”子Animation，因此它使用的是其实是子Animation的功能，而它本身并不提供 动画效果。因此它会覆盖Animation类的一些特别的方法，比如onStart、onStep和onEnd，而像SequenceAnimation 甚至覆盖play，pause和stop方法。
　　作为示例，我们来开发一个RandomExecutionAnimation，它的作用是随机从子Animation中选择一个，并播放它的动画效果。RandomExecutionAnimation的代码如下：
RandomExecutionAnimation 
Type.registerNamespace("Jeffz");


Jeffz.RandomExecutionAnimation = function(target, duration, fps, animations)

{

Jeffz.RandomExecutionAnimation.initializeBase(this, arguments);

this._executingAnimation = null;

}

Jeffz.RandomExecutionAnimation.prototype = 

{

dispose : function()

{

Jeffz.RandomExecutionAnimation.callBaseMethod(this, "dispose");

delete this._executingAnimation;

},


onStart : function()

{

Jeffz.RandomExecutionAnimation.callBaseMethod(this, "onStart");

var animations = this.get_animations();
var index = Math.floor(animations.length * Math.random());
this._executingAnimation = animations[index];
this._executingAnimation.onStart();

},


onStep : function(percentage)

{
this._executingAnimation.onStep(percentage);

},


onEnd : function(percentage)

{
this._executingAnimation.onEnd();

}

}

Jeffz.RandomExecutionAnimation.registerClass(

"Jeffz.RandomExecutionAnimation", $AA.ParentAnimation);
 
　　在 RandomExecutionAnimation中，我们覆盖了onStart、onStep和onEnd方法，将功能完全委托给随机选择的子 Animation。因此，在子Animation中设置的duration和fps属性的效果将被忽略，它们将会完全使用 RandomExecutionAnimation对象中设置的duration和fps。ParallelAnimation也使用了这种做法，因为它 所有的子Animaion需要同时播放，所以ParallelAnimation就提供了一个同步调配的作用。
　　RandomExecutionAnimation的使用效果如下：
Hello World
Duration: 
Fps: 
  
 
　　在这个示例中，我在RandomExecutionAnimation中放置了3个ColorAnimation，分别用于变化元素的边框，背景和前景的颜色。大家可以多次点击Play按钮察看效果。


本文转自 jeffz 51CTO博客，原文链接：http://blog.51cto.com/jeffz/60254，如需转载请自行联系原作者
weixin_33901843
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
animation的用法：
qq_29704567的博客
04-08 5360
1.animation animation是一个简写属性，用来设置做某个动画，属性内容包括： animation-name: 规定动画的名字。这个动画名是由@keframes设置的，下面有关于@keyframes的详细内容。 animation-duration: 规定动画要执行的时间。参数为：一个数字n，单位为毫秒。 animation-timing-function: 规定动画的...
Animation_Parse：动画客户端
02-04
在Animation_Parse项目中，C#被用于构建动画客户端的主体结构，包括数据模型、业务逻辑和用户界面。 动画数据解析是项目的核心部分。在计算机中，动画通常由一系列帧组成，每个帧代表一个特定时刻的画面。这些帧的...
Roson的Qt之旅#41 QML父动画(ParentAnimation)
Allen Roson
10-04 174
1.继承关系 父类：Animation 子类：无 2.综述 ParentAnimation用于动画一个项目的父变化。 例如，下面的ParentChange在单击blueRect时将其更改为redRect的子对象。ParentAnimation，定义了一个在过渡期间应用的NumberAnimation，确保项目移动到它的新父元素时动画平滑: import QtQuick 2.9 import QtQuick.Window 2.2 import QtQuick.Controls 2.2 Win
qml 动画 ParentAnimation
朴勇佑的专栏
12-07 153
import QtQuick 2.0 Item { width: 200; height: 100 Rectangle { id: redRect width: 100; height: 100 color: "red" } Rectangle { id: blueRect x: 150 width: 50; height: 50 color: "blu...
QML类型：ParentAnimation、ParentChange
友善啊，朋友的博客
10-07 339
ParentAnimation 一、描述 ParentAnimation 用于为 Item 的父更改设置动画。 例如，以下 ParentChange 在单击时将 blueRect 更改为 redRect 的子项。 包含 ParentAnimation，它定义了要在 transition 期间应用的 NumberAnimation，可确保项目在移动到其新父项时平滑地进行动画处理： import QtQuick 2.0 Item { width: 200; height: 100
qml状态和动画
yangyang031213的博客
03-06 1020
main.cpp与其他的一致 状态、状态切换、属性动画、槽触发动画、独立动画、切换动画、qml针对一些属性优化的动画、弹簧一样的动画、组合动画、反弹、缓冲、曲线、加速、减速等动画效果等等。 main.qml import QtQuick 2.7 import QtQuick.Controls 2.0 import QtQuick.Layouts 1.3 Rectangle { i...
AI：大模型领域最新算法SOTA核心技术要点总结(一直持续更新)、大模型实战与理论经验总结(训练优化+代码实战+前沿技术探讨+最新案例应用)、带你精细解读多篇优秀的大模型论文、AI领域各种工具产品集合
热门推荐
近期请国内外头部出版社可尽快私信博主！——心比天高，仗剑走天涯，保持热爱，奔赴向梦想！低调，谦虚，自律，反思，成长，还算是比较正能量的博主，公益免费传播……内心特别想在AI界做出一些可以推进历史进程影响力的东西(兴趣使然，有点小情怀，也有点使命感呀)…
04-13 6万+
​ AI：大模型领域最新算法SOTA核心技术要点总结(一直持续更新)、大模型实战与理论经验总结(训练优化+代码实战+前沿技术探讨+最新案例应用)、带你精细解读多篇优秀的大模型论文、AI领域各种工具产品集合(文本/图片/编程/办公/视频/音频/多模态类)的简介之详细攻略 目录 相关文章 大模型领域最新算法SOTA总结
Unity 2D Animation（2D动画）学习
王王王渣渣的博客
03-24 1万+
引言 2D Animation是Unity2018版本之后出来的新功能，我们可以用其在2D图片上制作骨骼动画。 例如我们可以将下面这张2D图片添加一个动画。 由于是简单的一张图片，所以效果不是特别好，我们也可以在PhotoShop中一张完整的图片切割成好几个部分（图层），然后导出一个PSB文件（PSD文件暂时不支持）来单独处理每个图层的动画效果。 接着跟着一起，让图片动起...
Android Property Animation属性动画：rotation旋转(2)
Zhang Phil
01-11 2万+
 Android Property Animation属性动画：rotation旋转(2) 附录的文章1，说明了如何简单的实现一个Android的属性动画Property Animation渐变透明。 本文以Android属性动画的旋转为例，说明如何实现Android属性动画Property Animation的旋转。和附录的文章1为基础，只需要在附录文章1的基础上略加修改，即可实现Pr
android-animation-collections:android动画集合
05-02
此外，它还可以用于非视图对象的动画，如改变数据模型的值或者控制自定义对象的行为。 在PropertyAnimation中，主要有以下关键概念： 1. **ValueAnimator**: 这是动画的基础，可以对任意可量化的属性进行动画处理。...
Animation-practice:动画页面练习
04-20
Animation-practice Animation Page Practice 中文课程跟着YouTube，澎澎的课程及金鱼系列课程，学了好一阵子跟完了，因此HTML、CSS的基础也有磨练起来，细节概念上也有一定的程度当然还有更深的细节可以继续探讨。...
animation-play:小动画-娱乐
03-29
在CSS中，与动画相关的属性主要由`@keyframes`规则和一系列的单个CSS属性共同构成，例如`animation-name`、`animation-duration`、`animation-timing-function`、`animation-delay`、`animation-direction`、`...
Text-Animation-Effect:文字动画效果
03-16
2. `animation` 属性：它是一个复合属性，可以一次性设置多个与动画相关的属性，如动画名称、时长、延迟、填充模式等。例如，`animation: typing 2s linear infinite;`将应用名为“typing”的动画，持续2秒，线性...
pi_heif-0.17.0-pp310-pypy310_pp73-macosx_12_0_x86_64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
mmexport1722080103662.jpg
07-27
mmexport1722080103662.jpg
matlab 20244a 6
07-27
matlab 20244a 6
pi_heif-0.17.0-cp310-cp310-macosx_12_0_x86_64.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
CoreAnimation深度解析：打造流畅iOS动画
"iOS动画（CoreAnimation）总结" 在iOS开发中，CoreAnimation是一个至关重要的框架，它为开发者提供了创建丰富、流畅的2D图形和动画的能力。CoreAnimation是基于图层（CALayer）的，这些图层可以独立于视图（UIView...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值