# 元件动画 元件动画可以实现复杂的动画效果,每一个元件都是一个独立的完整动画,元件在“舞台”上运动的同时,元件内部的动画也可以同时播放,元件可以重复使用。 * * * * * 如图,点击“素材库”,在“舞台”上添加一个车轮的图片素材 ![](https://box.kancloud.cn/584e5a409e5b53d808f4bd5857eed23b_800x341.png) 选中车轮素材,右键→“转换为元件”,即将车轮元素属性转换为元件 ![](https://box.kancloud.cn/12bbad0c69f997765041b7facb8be36d_800x258.png) 双击“舞台”上的车轮,进入元件编辑页面 ![](https://box.kancloud.cn/5273bdb432c4042fb33f5bf1980910e4_800x376.png) 在时间轴50帧位置右键→“插入帧” ![](https://box.kancloud.cn/265016e4435a0c2a42c92d8b14504d10_800x296.png) 在任意有帧的位置右键→“插入关键帧动画” ![](https://box.kancloud.cn/dc117a60dba7dc6d85b69d2a8e299baf_800x152.png) 点击选中最后有帧位置(此处为第50帧),在“属性面板”下调整元件属性“Z轴旋转角度”为“360”度,点击“播放”可观察车轮出现自转一周的动画效果 ![](https://box.kancloud.cn/15010c3d8b3e066d2095eb52cae3e692_800x536.png) 点击“舞台”回到“舞台”编辑页面 ![](https://box.kancloud.cn/8e032c233e10ff66e12b655eb69518d8_800x321.png) 点击“预览”发现元件动画可重复不断地播放 ![](https://box.kancloud.cn/4b8bdd352e234ce264dc7ff810fcf138_800x349.png) 元件也可重复使用。例如在“元件面板”下找到车轮元件,鼠标可将其选中并拖拉至“舞台” ![](https://box.kancloud.cn/4c65ccd1d117bd3b873abad2f40c0acb_800x354.png) 元件可配合舞台操作进行复杂的动画设置。如下图,在“素材库”中添加进一个汽车图片素材至“舞台”,选中汽车图片,右键→“排列”→“移至底层” ![](https://box.kancloud.cn/948b2301525880b2d6fea1f949dfd87e_800x304.png) 调整“舞台”上原本的两个车轮元件位置、大小,使其对齐覆盖汽车图片上的两个车轮 ![](https://box.kancloud.cn/bdeb27c89d4c6194ff0a3b693ad0872b_800x325.png) 点击“预览”,出现汽车轮胎转动的动画效果 ![](https://box.kancloud.cn/31a8be33074a16f31a3a6dedbf532885_800x347.png) 在“舞台”的40帧位置,右键→“插入帧”→右键→“插入关键帧动画” ![](https://box.kancloud.cn/8a989c7b298551f222141c7dab97729f_800x306.png) 选中关键帧动画的起始帧(此处为第1帧),将汽车移至屏幕左侧 ![](https://box.kancloud.cn/106c5485dda1a5f52ba851e49a1d77b3_800x438.png) 选中关键帧动画的最后帧(此处为第40帧),将汽车移至屏幕右侧 ![](https://box.kancloud.cn/490ebcf5f38e380afb3d701bd3cf227b_800x473.png) 点击“预览”,观察汽车从屏幕左侧开至右侧的动画效果 ![](https://box.kancloud.cn/c58cef5e98a1e9f3dab52feb2a78b818_800x468.png) 观看本节视频教程: http://cdn1.mugeda.com/course/3/3.3/3.3.8.mp4