恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
用Principle绘制小动画
0.0°
2017-08-11 原创文章 经验/观点 举报 8815 26 16 4

Principle可以实现快速绘制小动画,但它最大的作用在于交互点击上的完美呈现,学会这个小动画基本就掌握了这款软件的快速运用了。

Principle这款软件交互友好,可视化操作,调节方便,适用于简单快速的动效需求;尚未接触的同学可以查看 Principle 中文文档,仔细琢磨后就能轻松驾驭目前最好用的移动端 UX 原型设计软件,搭配 Sketch 那简直双剑合璧!

下面是网上自学的一只小猫的动效,练习完这只小猫基本就掌握了这款软件啦,已上传源文件,下面简要说下绘制要点,一起学习下~


Image title

首先,我们先用Sketch画出大体造型,形象很简单,会用sketch的童鞋应该都能画出来。尾巴部分需要注意下,转动部分画一个半弧形的尾巴,在principle里通过转动角度来实现,尾巴上方加一个白色图形进行遮罩。遮罩功能时principle中比较常用到的功能。


在sketch中画好图形可以实现直接导入到principle软件中。点击principle软件靠左的钻石图标默认导入当前sketch文件。



导入文件后,第一步要做的是建立触碰区域,也就相当于热点,有热点区域才能挪动图像。

热区就是左上角的矩形控件,将矩形形状覆盖在猫的脸上,然后在给这个形状添加移动属性,x轴y轴都选择Scroll。





添加完属性后点Drivers

相当于给这个触碰区域设置一个可以运动的赛道,在赛道上才能进行翻转、变换等各种动画效果。所以下面要做的事情就是点击需要变换的图层,然后挪动Drivers赛道距离通过配合赛道含有的各大属性来实现效果。


例如:选中脸部的编组,在x轴0的位置上点加号添加一个关键帧,点击蓝色按钮选择X,表示在水平位置上控制脸的左右移动。移动指针到 85打一个X的关键帧(即点击0处的蓝色按钮),此时形成一条蓝色的线,挪动线我们可以看到“控件”区域向左位移了,此时再调整左侧工作区中x轴数值,使得脸左移。


同理移动指针到 -80 再打一个X的关键帧,调整左侧工作区x轴数值,脸随着右移。

然后操作y轴,在scrlll y 轴0的位置上点加号添加一个关键帧,同x轴一样,左右打关键帧,在左侧工作区的y轴上调整脸上下位置的挪动即可。


通过在赛道上对x、y轴在各种模式下的左右挪动,配合工作区上、下、左、右、角度、不透明等数值变改变达到变化的效果。


接着就是时间轴的控制了,时间轴用来控制两个页面之间的跳转时间变换和形式。点击跳转的线条,下方出现时间轴,需要进行手动调节。


最后,就是录制了,点击录制的按钮,有三种录制形式:含圈圈、含鼠标、没有触碰点


当录制按钮闪烁时表示正在录制,再次点击录制结束可以选择gif、mov格式保存;
手机端下载mirror,可以同步查看动画效果,非常方便!


以上就是这歌动画的基本操作步骤了,大家举一反三,还可以变变造型,并且可以运动到app页面的交互跳转中来,实现完美交互体验。






更新:2017-08-11

下载
收藏

26人已收藏

未心vicy

心之所向,心之所设

  • 10

    作品

  • 11

    粉丝

  • 8

    关注

  • 油画色彩练习
  • 胖芽表情包
  • 作品集:APP和网页等设计作品
  • 酒店网站响应式设计

    猜你喜欢

      2017-08-11 原创文章 经验/观点 举报 8815 26 16 4

      用Principle绘制小动画

      0.0°

      你确定要举报用Principle绘制小动画

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年08月11日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      16
      26
      4

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录