header_v0.7.32

[Principle晋阶一]&动效Demo合集

1年前发布

原创文章 / UI / 教程
孔晨Point_Vision 原创,如需商业用途或转载请与孔晨Point_Vision联系,谢谢配合。

用principle可以实现在手机端实时交互,无需代码开发就可以作出模拟的高保真。<br>在app store中下载principle 用usb连接mac在手机同步预览。类似sketch mirror。<br>本次教程是principle的

本次教程是principle的晋阶篇!

或者说是动效demo的教程更贴切。因为在实现一款动效的时候常常用到的不止一款软件。今天的案例三合一,用到了AE PS等软件配合principle去实现交互动效。我认为教程文章跟去网上自己看教程的区别在于。可以分享我的经验,思考,而不是单纯教给大家一些软件的操作,那样做出来文章毫无疑义。希望特别是新手,能够举一反三做出自己的原创。但是在原创之前你需要大量浏览。需要理解动效的规律。运动的曲线。你需要知道现在最好的动效做成什么样。在ui中的动效,要尽量遵从ios跟Android的规范.


这个案例需要注意录屏时的细节,画板调大点,背景调成白色。录制的时候不要录制到卡片到边缘,不然会出现穿帮。利用app实时预览pp的动效并且可以高保真交互。在进入灯页面的时候给灯图片本身一个可以拖拽属性(drag)跟调解页面切换的属性(page)一样。

悬浮demo。

这个动效利用drivers滑动老司机切换页面。切换的同时背景颜色有变化。如文章初篇中讲到到页面切换。

在配合tap点击事件跳转到其它页面。页面切换后手表有个旋转跟位移的变化。神奇移动。

这个动效在进入数据页面的时候,图表从右边到左自动进场的一个demo,用到的是pp中的auto,页面自动跳转。把图表做的很长,这时候画板就起到了一个蒙板的作用。就形成了这种障眼法。


很多同学说炫酷的动效为什么在应用中见不到。这不就是模拟的探探的交互吗。利用dervers老司机切换页面,切换的时候卡片旋转,位移。其它元素透明度跟位置的变化让整个交互丰富与和谐。

tap点击,图片放大 位移。

这个跟上面类似探探的案例相同。只不过把老司机横向移动改成了纵向,那么给元素在drivers轴上添加效果的时候就不是x属性了,应该是y。还是那句话,举一反三~带着思考去创新吧。


2107

    文章信息

    Hello PM 意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功