多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
# 如何实现动画控制 **1.用两个按钮控制动画播放** 如下图,点击“文字”工具添加两个文字,分别输入“暂停”“播放” ![](https://box.kancloud.cn/f1bd3905838397cd9ee89e42cff5d98e_900x470.png) 为“暂停”文字设置编辑行为:“动画播放控制”→“暂停”→“触发条件”:“点击” ![](https://box.kancloud.cn/9a9cfbb4ed6da78c5886f348ab1491c5_900x505.png) 为“播放”文字设置编辑行为:“动画播放控制”→“播放”→“触发条件”:“点击” ![](https://box.kancloud.cn/00c9559b66a69db2ba386336ba3dc4bb_900x505.png) 在“动画”下拉菜单栏内点击勾选“循环”,使动画自动循环播放 ![](https://box.kancloud.cn/db9512fc0014ad563fcf094f1928cbbd_900x493.png) * 应注意:点击“动画”下拉菜单内的“循环”,作品中所有页面的动画都会循环播放 * * * * * 若要设置单独一页的动画可循环播放,其他页面的动画只播放一次。则先取消掉“循环”功能。新建第2页作参考,在第2页制作一个矩形移动的动画效果。在第1页新建一个图层,为其重命名为“循环播放”。 ![](https://box.kancloud.cn/75b33f1b3ae67702a6942ac11f780987_900x476.png) 选中“循环播放”图层最后1帧“插入关键帧”,在舞台之外添加一个图形,例如下图添加一个多边形,添加行为:“动画播放控制”→“跳转到帧并播放”→“触发条件”:“出现”,点击“编辑”按钮 ![](https://box.kancloud.cn/96a9ceaca485ecb7955d23a502008383_900x506.png) 设置参数 “帧号”:“1” 点击“确认”,即在第1页设置动画循环播放的效果 ![](https://box.kancloud.cn/c90cce4b888dbe08449b6d2df7f31d04_900x507.png) “跳转到帧并停止”行为:删除多边形“跳转到帧并播放”的行为。重新添加行为:“动画播放控制”→“跳转到帧并停止” →“触发条件”:“出现”,点击“编辑”,设置参数“帧号”为“1”。可点击预览效果 ![](https://box.kancloud.cn/667a203986d01fcaf10ac62c81573be1_900x499.png) * * * * * **2.如何制作一个按钮,实现“暂停”与“播放”的切换?** 如下图,在新的作品编辑页面内,新建一个矩形,设置其从左往右移动的动画 ![](https://box.kancloud.cn/d19f5c2c4c9bb69e6c1ccc98e4187790_900x507.png) 在“元件”面板内点击“新建元件”按钮,新建一个元件 ![](https://box.kancloud.cn/4d5fdcea468cb39e47f196f28326afc1_900x519.png) 点击“文字”工具添加一个文字,输入“暂停” ![](https://box.kancloud.cn/f286d74a9d87b372bc31ecbc6077c2e7_900x460.png) 选中第2帧,右键→“插入帧”→右键→“插入关键帧” ![](https://box.kancloud.cn/72029b1b537d65a3a2fcc1ccc161d579_900x505.png) 将第2帧上的文字改为“播放” ![](https://box.kancloud.cn/133d4ec65783bca2190a9ba9609bd84e_900x507.png) 回到舞台,点击“新建图层”按钮新建一个图层,重命名为“按钮”,在“元件”面板下鼠标选中新建的元件,按住不放拖动至舞台 ![](https://box.kancloud.cn/33c89ec1231a8d8e3fc7aa374436e2f8_900x510.png) 双击舞台上的元件进入元件编辑页面,点击元件第1帧上“暂停”文字,添加行为:“动画播放控制”→“暂停”→“触发条件”:“出现” ![](https://box.kancloud.cn/2b4a3dbaa136813a351dbce1ef467659_900x508.png) 继续添加行为:“动画播放控制”→“暂停”→“触发条件”:“点击” ![](https://box.kancloud.cn/4153c8b0cee89059ccce66a741e6208a_900x501.png) * 注:为方便演示,可在“动画”下拉菜单下勾选“循环”功能 设置“参数” “作用对象”:“舞台” 点击“确认”,即设置了“点击该元件,舞台上的动画即会停止”的行为效果,可点击预览观察效果 ![](https://box.kancloud.cn/fa3bf20052d85ed3d914b7e4f1e50925_900x505.png) 再为“暂停”文字添加一个行为:“动画播放控制”→“下一帧”→“触发条件”:“点击” ![](https://box.kancloud.cn/1b082398087f2234b7821af057534910_900x485.png) 鼠标选中图层第2帧,点击“播放”文字为其添加行为:“动画播放控制”→“播放”→“触发条件”:“点击”,点击“编辑”按钮进入“参数”对话框,设置“参数”的“作用对象”为“舞台” ![](https://box.kancloud.cn/7175c96fd8a9646c0c7b2a5911ed44de_900x464.png) ![](https://box.kancloud.cn/132955a60a277bf4516f084bf782d87b_900x470.png) 同时再添加行为:“动画播放控制”→“上一帧”→“触发条件”:“点击”,可点击预览观察效果 ![](https://box.kancloud.cn/cd10617727f2885339707b9e1abc4b27_900x503.png) * * * * * **3.如何用舞台的“按钮”控制元件内的动画?** 以上所述操作是用元件内的“按钮”控制舞台上的动画,接下来将阐述如何用舞台的“按钮”控制元件内的动画 如下图,新建一个作品编辑页面,在“元件”面板下点击“新建元件”按钮新建一个元件 ![](https://box.kancloud.cn/99f37f4a4b23e6caf94711f309e7ae94_900x504.png) 在“素材库”中选择添加一张“铃铛”图片素材至舞台,如下图,为“铃铛”做一个左右摇摆的动画(具体参考相关教程) ![](https://box.kancloud.cn/293881a35504feea107d8eedbbc490ed_900x506.png) 回到舞台,在“元件”面板下找到新建的元件,鼠标点击不放将其拖动至舞台 ![](https://box.kancloud.cn/793e17543ee323d46a6b7d614e046e5d_900x499.png) 为方便观察,可在舞台的“属性”面板下调整其颜色,使其与“铃铛”元件的颜色有明显差异 ![](https://box.kancloud.cn/d3f59b8c29b72b4175c0038ce4d632d6_900x508.png) 设置“点击舞台上的按钮播放元件动画”行为:如下图,双击“图层0”重命名为“元件铃铛”,点击“新建图层”按钮新建一个图层,重命名为“按钮” ![](https://box.kancloud.cn/0177b8dc0063451ce2fef3650d48560e_900x504.png) 点击“文字”工具在舞台上添加一个文字,输入“点击敲门”文字按钮 ![](https://box.kancloud.cn/2a2b36649003603158347d787f1ef48d_900x505.png) 双击舞台上的“铃铛”元件进入元件编辑页面,点击“新建图层”按钮新建一个图层,并为其重命名为“暂停”,在“暂停”图层添加一个圆形形状,设置“暂停”行为:“动画播放控制”→“暂停”→“触发条件”:“出现” ![](https://box.kancloud.cn/7116b18512406aa7a249f29eaa37e9d3_900x504.png) ![](https://box.kancloud.cn/3f4f9fd2ae9ccb7dc04d5d7ddbcdd706_900x512.png) 删除“暂停”图层上第1帧之后的所有帧数 ![](https://box.kancloud.cn/568f145abb0e8c98a70ba45857ac5bb1_900x507.png) 为使圆形不被看见,可直接将圆形拖动至舞台之外,也可在其“属性”面板下将其“透明度”设为“0” ![](https://box.kancloud.cn/4cd1efbb6e6047ebb506e5bd99f07f1a_900x506.png) 回到舞台,选中“铃铛”元件,在其“属性”面板下为其命名为“铃铛” ![](https://box.kancloud.cn/81359435ba351c9eb1e8b3f3554c7365_900x506.png) 为“点击敲门”文本框的添加行为:“动画播放控制”→“播放元件片段”→“触发条件”:“点击”,点击“编辑”按钮进入“参数”对话框 ![](https://box.kancloud.cn/2191e9d6a6522ea0c8a48fbfa7a488c7_900x488.png) 设置“参数” “元件实例名称”:“铃铛(元件实例)” “是否循环”:“循环” “起始帧号”:“2” “结束帧号”:“20” 点击“确认”,即设置了“点击‘点击敲门’按钮,播放‘铃铛’元件第2到20帧的动画”行为 ![](https://box.kancloud.cn/d8cdd5fdab084ff7440ed7f3f6cd7791_900x506.png) 如要设置点击“点击敲门”按钮,“铃铛”即跳转至其中的某一帧(假设为第10帧),则可以将参数改为: “起始帧号”:“10” “结束帧号”:“10” ,其他不变 ![](https://box.kancloud.cn/fabea99f9fdffbea225a4e95a11f2d70_900x474.png) 还有另外一种方法如下: 删除前面设置的“播放元件片段”行为 ![](https://box.kancloud.cn/cc3aa070c035266dc79b9baaf7bdaa16_900x507.png) 重新设置行为:“动画播放控制”→“跳转到帧并停止” →“触发条件”:“点击”,点击“编辑”按钮进入“参数”对话框 ![](https://box.kancloud.cn/78d06e5f0678d88ef7502360fcba1b30_900x508.png) 设置“参数”: “帧号”:“10” “作用对象”:“铃铛” 点击“确认”,即设置了“点击‘点击敲门’按钮,‘铃铛’元件即跳转至第10帧” ![](https://box.kancloud.cn/a82f641d4e5330a4a7121d2fe542e443_900x502.png) 设置“点击舞台上的按钮暂停元件动画”行为:双击舞台上的“铃铛”元件进入元件编辑页面,删除“暂停”图层 ![](https://box.kancloud.cn/f1e8af5f4ecf16462c42a266b761242b_900x503.png) 删除“点击敲门”文本框原先设置的行为 ![](https://box.kancloud.cn/7f8438cf0721214cd528f9bd945a5c56_900x510.png) 将“点击敲门”文本框内容改为“安静一下” ![](https://box.kancloud.cn/d51358bdc165e1aaafdc9beaea15fbba_900x511.png) 为“安静一下”文本框的添加编辑行为:“动画播放控制”→“暂停”→“触发条件”:“点击”,点击“编辑”按钮进入“参数”对话框,设置“参数”的“作用对象”:“铃铛”(若“参数”中的“作用对象”选择“舞台”,则行为控制的是舞台上动画,对元件本身的动画并不能控制) ![](https://box.kancloud.cn/d72e81e0a6d8204fe605d4890956a8a1_900x495.png) **4.“上一页”“下一页”行为** 新建一个作品编辑页面,如下图,新建三页,为明显区分观察,在每一页上分别添加文字“第一页”“第二页”“第三页” ![](https://box.kancloud.cn/ac0ebc2904bc5857b28a1d8091ad02b2_900x493.png) 选中第1页,点击新建一个图层,重命名为“禁止翻页”,在舞台之外添加一个矩形 ![](https://box.kancloud.cn/657cd56735d88fb3847b464ad1d57d1f_900x507.png) 为矩形添加行为:“动画播放控制”→“禁止翻页”→“触发条件”:“出现” ![](https://box.kancloud.cn/26f1e761951ea3bc653731880da7b1ce_900x504.png) 点击新建一个图层,重命名为“按钮”,在“按钮”图层添加一个矩形,为矩形添加行为:“动画播放控制”→“下一页”→“触发条件”:“点击” ![](https://box.kancloud.cn/4225e7d1514308e77a1dfccff5a63c9f_900x504.png) 复制矩形粘贴进第2、3页 ![](https://box.kancloud.cn/771141fd28e3d0a3ca45a1035c312c9a_900x506.png) 在第3页中,修改矩形行为,如下图,删除“下一页”行为 ![](https://box.kancloud.cn/1f9b2b60950c05ced275394e0c8d81e7_900x506.png) 重新添加行为:“动画播放控制”→“上一页”→“触发条件”:“点击” ![](https://box.kancloud.cn/0300ac94824111ced014d3e2227c079c_900x504.png) 在“翻页”面板下,可选择“翻页效果”,如下图,选择“淡入” ![](https://box.kancloud.cn/b6625093dcb4c62d53258de49a71c028_900x479.png) 单独设置某一页的翻页效果:如下图,回到第1页,在矩形“编辑行为”对话框中,点击删除“下一页”行为 ![](https://box.kancloud.cn/c4ae7f6039ebff6df9ec7c2315339421_900x509.png) 重新添加行为:“动画播放控制”→“跳转到页” →“触发条件”:“点击”,点击“编辑”按钮进入“参数”对话框,在“参数”中设置跳转页号和翻页方式 ![](https://box.kancloud.cn/9d78520fa26e05bb570cc927056840f1_900x506.png) ![](https://box.kancloud.cn/a556e69649518391ccd6dc31e8d90301_900x509.png) * 注:“禁止翻页”只针对系统默认的翻页效果,而不针对设置的翻页行为 如何在某一页恢复翻页:如下图,点击选中第2页,在舞台之外添加一个矩形,为矩形添加行为:“动画播放控制”→“恢复翻页”→“触发条件”:“出现” ![](https://box.kancloud.cn/086ccc0cf8057680787302abc8e3ecb1_900x507.png) 翻页时间的设置:可在“翻页”面板下设置所有页面的翻页时间 ![](https://box.kancloud.cn/5a9708f24f5306155d1cbacd3e5d4a48_900x509.png) 设置跳转到页的动画时间:如下图,点击回到第1页,删除矩形按钮的“跳转到页”的行为 ![](https://box.kancloud.cn/7f1b456d53c1bf711bfb6b204543c9a8_900x510.png) 选中所有图层的第3秒(即第37帧)插入帧,新建图层,重命名为“暂停”,同时在舞台上添加一个多边形 ![](https://box.kancloud.cn/2f692d5da2c3164c4386e7a0e4c1971a_900x510.png) 设置多边形的行为 “动画播放控制”→“暂停”→“触发条件”:“出现” ![](https://box.kancloud.cn/7be35a082ba77d818a7b96515da441ab_900x506.png) 删除“暂停”图层第1帧之后的所有帧数 ![](https://box.kancloud.cn/5dd22ce8cff822c8e2629414eef6774a_900x500.png) 点击新建一个图层,重命名为“跳转到页第二页”,在“跳转到页第二页”最后一帧“插入关键帧” ![](https://box.kancloud.cn/243dd28e6b308d5bc92ce1474b6cb7c8_900x507.png) 在舞台上添加一个圆形,为方便区分可在其“属性”面板下调整圆形的颜色,点击圆形添加行为:“动画播放控制”→“跳转到页” →“触发条件”:“出现”,点击“编辑”进入“参数”对话框 ![](https://box.kancloud.cn/8e167b8a376513df30ee15a2baba2f16_900x514.png) 设置“参数”: “页号”:“2” “翻页方式”:“淡入” ![](https://box.kancloud.cn/48f21fc4f936ec0ee144788fd853e66f_900x505.png) 设置矩形按钮行为:“动画播放控制”→“播放”→“触发条件”:“点击”,即设置了点击矩形按钮3秒之后页面跳转的行为。可点击预览观察效果 ![](https://box.kancloud.cn/311c0759e352b2abdb1918571571cadd_900x503.png) 控制帧号或页号的相关行为: 如下图,新建一个作品编辑页面,在舞台上添加一个矩形 ![](https://box.kancloud.cn/311c0759e352b2abdb1918571571cadd_900x503.png) 选中第10帧,右键→“插入帧”→“插入关键帧”,在舞台上添加一个圆形 ![](https://box.kancloud.cn/238d7715206ba73b7abe98625cfde205_900x504.png) 同理,在第20帧添加一个五角星形状 ![](https://box.kancloud.cn/a74d551e5c3c2a730b05aef165cb859d_900x510.png) 点击选中第1帧,如下图,为关键帧命名为“方块”,命名成功后可发现第1帧上方有一个黄色的小三角形,同理,分别为第10帧、第20帧关键帧命名为“圆”“五角星” ![](https://box.kancloud.cn/a48032e4bc0e7855471d5f9b35cca671_900x501.png) 新建图层,为其重命名为“按钮”,在工具栏内分别点击“矩形”“椭圆”“多边形”工具在舞台上绘制一个小矩形、小圆以及小五角星 ![](https://box.kancloud.cn/f6ca99bbcac78e65cdc3ee22a650d1e1_900x507.png) 新建图层,为新图层重命名为“暂停”,点击“矩形”工具在舞台之外添加一个矩形,添加“出现即暂停”行为:“动画播放控制”→“暂停”→“触发条件”:“出现” ![](https://box.kancloud.cn/53ccea591dd725a8fdb6b064a84a98dd_900x507.png) ![](https://box.kancloud.cn/b994537820d89b3b625bcde5cfee9a80_900x506.png) 为舞台底端小矩形添加行为:“动画播放控制”→“跳转到帧并停止” →“触发条件”:“点击”,点击“编辑”按钮进入“参数”对话框 ![](https://box.kancloud.cn/73b77080f32f22b69487381e6c37d778_900x507.png) 设置“参数”: “帧名称”:“方块” 点击“确认” ![](https://box.kancloud.cn/68b5930e54baead9dfab85dd9293ae19_900x510.png) 同理,分别为小圆、五角星添加“跳转到帧并停止”行为,其中分别跳转到帧名称为“圆”“五角星”上,可点击预览观察效果 ![](https://box.kancloud.cn/22a1d4b4cc56daf6e5ec7365d7d95615_900x506.png) ![](https://box.kancloud.cn/7910bb2f405aed9e76869b20ca633234_900x506.png) * 注:若在以上的“参数”设置内,既填了“帧号”又填了“帧名称”,系统会自动以排在上面的“帧号”为准,因此应注意在选择了“帧名称”时不应再填不同的“帧号”;同帧的设置不一样的地方是,在“跳转到页”的“参数”设置中,若同时填写了不同“页号”和“页名称”,系统会自动按照“页名称”跳转,而不是排在前面的“页号” ![](https://box.kancloud.cn/6ab0575317dfa0dbdc88774a02bca6e0_900x508.png) * * * * * **5.如何设置点击一个按钮即跳转到某页的某帧上?** 如下图,新建一个作品编辑页面,新建三个页面,为方便辨认,分别在各页舞台上添加三个文字,输入“第一页”“第二页”“第三页”文字内容 ![](https://box.kancloud.cn/e5c3286c704e14350e0c3771b2d6c887_900x510.png) 点击回到第1页,添加两个文字,分别输入内容为“到第三页的第1帧”“到第三页的第10帧” ![](https://box.kancloud.cn/ffdb4b34e77b62a3d33e932e34152c97_900x504.png) 点击来到第3页,点击新建“图层1”,在舞台上添加一个文字,输入“1帧” ![](https://box.kancloud.cn/ee7a357443d490077b1ba93b8d6eedef_900x514.png) 选中所有图层的第10帧“插入帧”,选中“图层1” 第10帧“插入关键帧”,在舞台上添加一个文字,输入“10” ![](https://box.kancloud.cn/a190fb0a1fe7975b39de8d57018af935_900x508.png) 点击新建“图层2”,在舞台上添加一个矩形,设置“出现即暂停”行为:“动画播放控制”→“暂停”→“触发条件”:“出现” ![](https://box.kancloud.cn/80bd7cabf03ff77931cb12cb85015662_900x504.png) ![](https://box.kancloud.cn/0c916fb7eeb0abed43da3b556b9af550_900x508.png) 新建图层“判断”,在舞台上添加一个文字,输入“0”,为方便区分,可在其“属性”面板下调整数字的颜色,为其命名为“判断数” ![](https://box.kancloud.cn/65326a129d29c905a450e867fbf653fd_900x506.png) 设置该文字行为:“动画播放控制”→“跳转到帧并停止”→“触发条件”:“属性改变”,点击“编辑”按钮进入“参数”对话框 ![](https://box.kancloud.cn/01cfae7c5fa775dba4736c397ca6e925_900x509.png) 设置“参数”: “帧号”:“1” “作用对象”:“舞台” “执行条件”:“检查元素状态” “元素名称”:“判断数” “考察属性”:“文本取值” “逻辑条件”:“等于” “参考值”:“1” ![](https://box.kancloud.cn/aff949b9b2aff051f9aa2c85ecfd881e_900x507.png) 同理添加下一个“跳转到帧并停止”行为 ![](https://box.kancloud.cn/73d9645c438b8cfa289f90a023f23d04_900x505.png) 设置“参数”: “帧号”:“10” “作用对象”:“舞台” “执行条件”:“检查元素状态” “元素名称”:“判断数” “考察属性”:“文本取值” “逻辑条件”:“等于” “参考值”:“10” ![](https://box.kancloud.cn/3fcc9fd2b36630160779abf5e7cda54c_900x501.png) 回到第1页,设置“到第三页的第1帧”文字行为:“属性控制”→“改变元素属性”→“触发条件”:“点击”,点击“编辑”按钮进入“参数”对话框 ![](https://box.kancloud.cn/ffeb6eaf27b8038347bc7b57369285ae_900x505.png) 设置“参数”: “元素名称”:“判断数” “元素属性”:“文本取值” “赋值方式”:“用设置的值替换现有值” “取值”:“1” 点击“确认”,即设置了“当点击‘到第三页的第1帧’文字,第三页的‘判断数’值会变成1”的行为 ![](https://box.kancloud.cn/1fcc89e5a7b663f88c703e73ef574eae_900x509.png) 同理,为“到第三页的第10帧”文字添加“改变元素属性”行为 ![](https://box.kancloud.cn/36dfa5922d869694ea25ed8e007969bf_900x505.png) 设置“参数”: “元素名称”:“判断数” “元素属性”:“文本取值” “赋值方式”:“用设置的值替换现有值” “取值”:“10” 点击“确认”,即设置了“当点击‘到第三页的第10帧’文字,第三页的‘判断数’值会变成10”的行为 ![](https://box.kancloud.cn/31e0a14ad36ccfb20c7c57ee90fc7715_900x506.png) 回到“到第三页的第1帧”文字的“编辑行为”对话框中,添加行为:“动画播放控制”→“跳转到页”→“触发条件”:“点击”,点击“编辑”按钮进入“参数”对话框,设置跳转“页号”为“3” ![](https://box.kancloud.cn/792a156e44ccde7cf84cab0fa6d491d5_900x505.png) 同理,回到“到第三页的第10帧”文字的“编辑行为”对话框中,添加“跳转到页”行为,在“参数”对话框中设置跳转“页号”为“3” ![](https://box.kancloud.cn/9cffb440a8b4532e5c057641023aef79_900x501.png) * 注1:若出现跳转有问题的情况,可回到第三页,进入“判断数”文字“编辑行为”对话框,检查行为的“触发条件”,之前设置的为“属性改变(正常情况下)”,由于系统更新等问题可将其都调整为“出现”即可,点击预览观察效果 ![](https://box.kancloud.cn/74bf86d14dd73c3f96cae0a671869642_900x508.png) * 注2:在“编辑行为”对话框中,系统的执行步骤是按照行为的上下顺序依次执行。 ![](https://box.kancloud.cn/eaade24c3e4458978749d163f433bc8b_900x510.png) 观看本节视频教程: http://cdn1.mugeda.com/course/3/3.3/3.3.14.mp4