让每一名学员高薪就业
返回列表 发新帖

按钮进度条动画设计

[复制链接]

55

主题

89

帖子

1236

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1236

版主

发表于 2018-3-8 11:34:56  | 显示全部楼层 | 阅读模式
本帖最后由 萤火虫 于 2018-3-8 11:33 编辑

今天给大家介绍的是如何利用An进行按钮进度条动画,跟着老师一起来看看吧!

第一:素材的准备,使用PS形状工具 1.png 绘制出我们需要使用的素材原图

2.jpg

软件工具:

3.png

第二:打开软件使用文件-导入-导入到库将素材图片导入到库中:

4.png

5.png

然后在图层区域创建三个新图层并把图片放入对应的图层帧中:

6.jpg

分别将他们转化为图形元件:选中舞台中对应图形按F8快捷键-名称为N1 N2 N3

7.jpg

第三:在‘进度条图层’上方添加一个名称为遮罩层的新图层:

8.png

在该图层第一帧的舞台上绘制一个矩形方块:

9.png

按快捷键F8把该图形转化为一个图形元件:

10.png

使用任意变形工具-快捷键Q,把该图形的中心点移至左端:

11.png

第四:延长时间轴上每个图层内容帧的长度(快捷键F5):

12.png

并在对应帧的位置使用F6设置出关键帧:

13.png

在遮罩层第二个关键帧上,选中它,并把改帧舞台上的矩形如图所示延长:

14.png

在改帧前方的任意区域点击鼠标右键,添加-传统补间动画

15.png

选中遮罩层,右键单击选择“遮罩层”设置:

16.png 17.png

第五:选择按钮图层,选中图中所示的关键帧,把对应改帧舞台中的按钮图形位移至箭头所示区域:

18.png

右键单击该帧中间任意区域,选择创建-传统补间动画:

19.png

到这一步,我们的按钮进度条动画就完成了。

20.png

以上就是关于按钮进度条设计的相关内容,感兴趣的小伙伴可以自己试试哦!

本文为源码时代UI老师原创,转载请标明出处(www.itsource.cn


回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

最新活动

联系我们

Java培训  |   PHP培训  |   UI培训  |   H5培训  |   Python培训  |   大数据培训  |   如何报名  |   视频下载
快速回复 返回顶部 返回列表