位置：首页>> 电脑教程>> 苹果Mac教程>> Principle for Mac如何设置文字输入动效？Principle for Mac使用教程

Principle for Mac如何设置文字输入动效？Principle for Mac使用教程

　　发布时间：2022-02-12 06:55:23　

标签：Principle,for,Mac使用教程,Principle,Mac

Principle for Mac，这款软件的设计动画让交互式用户界面变得容易，支持多种尺寸的原型设计，用很短的时间就可以制作出一个具有完整交互动画的原型，你可以把设计的交互动画生成视频分享到社交平台，今天为大家带来的教程是Principle for Mac如何设置文字输入动效。

1.开始
按T新建文字，输入“Type your phone number”，透明度设置为20％；然后移到画板合适位置。

2.制作光标
按A新建画板2，然后按R新建矩形；宽2px、高20px；设置合适颜色，移到画板合适位置。

选中这个矩形，点击【合成组件】，进入合成组件里面。（这是本节第一个重点。【合成组件】类似ps里的智能对象，有了它我们就可以创建一个动画组件，这样就允许我们可以制作在同一画板有多个动态的效果了。说白了就是，你可以把principle里的画板想象成ppt，如果没有【合成组件】，它只能向ppt一样，通过两张画板元素的不同而实现补间动画，就是那个过渡效果。但有了【合成组件】，就相当于你在一张ppt里插进了个视频或者gif。）创建一个事件画板，选择“自动播放（Auto）”，然后画板2再指回来。将画板2的矩形的透明度设置为0％。然后调整动画时长，为0.2秒。点击返回，然后你就能看到光标的闪烁啦。

选中画板1里默认文字，创建事件动画到画板2，选择“点击（Tap）”；创建事件动画到画板3，选择“自动播放（Auto）”。我们希望光标闪烁5次然后再输入手机号码。闪1次就是透明度“100％-0％-100％”的变化，即0.4秒，那么闪5次就是2秒。复制光标到画板3，将透明度改为0％；然后设置动画时间：将起点移到2秒位置，动画曲线设置为“无none”（注意：千万别把时长设成2秒，那就成了透明度从100％到0％需要2秒了）。

3.制作输入效果
按A新建画板4，复制画板1的默认文字到画板4；将透明度改为100％，输入手机号码；选中手机号码按快捷键command+G编组；按A新建画板5，复制画板4的文字到画板5。

选中手机号码，在“隐藏组外元素clip sublayers”项打钩，两个都要打钩；（本节第二个重点。principle里的“组”概念既有“编组”的概念，又有“蒙版”的概念。看过principle官网教程的一定知道，第一个视频教程就讲了这个概念，改变组的外框跟屏幕高度保持一致，就相当于隐藏了屏幕外的内容。）将画板4的组外框拉到最左边，这样号码就会全部隐藏起来；画板3到画板4创建动画选Auto；画板4到画板5创建动画选Auto；画板4到画板5的元素动画时长全部调为1.5秒，曲线全部调为“渐出 ease out”（这里减速运动会更逼真一些）。复制画板2的光标到画板5、画板4，调整到合适位置；画板4的光标设置透明度为0％；调整画板5的光标出现时间，起点在1.5秒位置，曲线设置为none，全部制作完成。

4.完成
录制动画，导出gif图。保存文件。

投稿

Principle for Mac如何设置文字输入动效？Principle for Mac使用教程

猜你喜欢