学习使用Adobe XD制作简单交互动画效果
Adobe XD 自动制作动画功能使得Adobe XD制作微交互动画有了更多的可能,Adobe XD 的自动制作动画要求第二个画板是第一个画板复制过来的,第二个画板中的内容做了改动,可以完成自动补间。类似于keynote里面的神奇移动,或者之前flash中的补间动画。
我们先看一下最终效果
打开Adobe XD,我们开始吧!
1、新建画布、拖入图片
这里我新建的画布尺寸是1920*1080像素。然后在画布中,画两个矩形框。红色矩形尺寸和画布尺寸一样,蓝色矩形我用的是200*1080像素。
2、处理图片,导入画板
照一张照片,拖入PS,裁剪成画布尺寸,然后分别保存一张正常色彩的和去色黑白的。然后把黑白的拖入红色矩形,正常颜色的图片拖入蓝色矩形。双击正常颜色的图层,调整图片的位置,让图片最右侧和矩形右侧对齐。
3、添加手柄
这一步可以发挥自己的设计能力,设计一个好看的手柄,我自己添加了一个简单的手柄,然后给手柄打组。
4、复制画板、调整图层
做好的画布进行复制,然后调整右侧正常颜色图片图层的宽度为1720,然后双击调整图片位置,最后调整手柄位置。
5、自动制作动画
终于到了最重要的一步了,前面的素材做好了以后,点击XD左上角的原型按钮,对第一个画板手柄添加触发方式为拖移,连接目标为下一个画板,类型选择自动制作动画,具体参数如下图。另一个画板的手柄也用相同的方式连接到第一个画板,参数相同即可。到这一步就大功告成了,具体的操作步骤可以看视频教程,第一次录屏讲课,不足之处还请见谅。
Powered by Froala Editor
声明:* 本站所提供的资源均来源于互联网,站内所有文字、图片内容由网站会员上传而来,UI社不具备此内容的版权。由于将本站资源用于商业用途而引起的纠纷,本站不负任何责任。如果有侵犯到您的权益,请联系本站删除,谢谢合作!联系邮箱:Uishe#qq.com (请将[#]换成@)