AE能做的动效，都能在App中实现了？
AE能做的动效，都能在App中实现了？我们总是能在dribble等网站看到一大堆酷炫吊炸天的动效。而在现实的App中却很难看到。除了它们都有些过度设计的倾向之外，最后没有在App上出现的很大一个原因是因为做不出来。现在很多小公司的实际情况是，你能想出100种动效方案，工程师就能给你说出101种做不出来的原因。至于这101种做不出来的原因里，一大部分原因是动效真的很难写。为了写个动效，用上几百行代码也是常有的事。如果你还不说清楚动效的具体原理，直接扔个视频给工程师，然他看着办。那么就是写出来了，十有八九也不是你想要的效果。弄到最后只能用GIF，而GIF对使用的场景又有着极大的限制。图片来自:/SHOTS/3281246-AIRPLANE-ANIMATION如上面的飞机尾焰，是整个设计的最大亮点。如果你是用了AE里内置的一些特效做出来的，也就是说你也不能很清楚的描述飞机尾焰产生的具体原理，那你在和工程师沟通时会显得特别困难，毕竟你总不能让工程师在开发的时候调用AE里面的功能吧。一年前，Airbnb着手准备解决这个动效做不出来的难题。现在他们给出的解决方案是Lottie，并已将它开源。Airbnb是这么介绍Lottie的：Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.大概意思就是说它是一个第三方library，可以实时渲染After Effect里做出来的动画，用起来就像调用切图一样方便。这里可能会有一个误区，它并不是直接将AE里的动画转换成iOS或者Android的代码，然后工程师直接复制进去就可以了。以iOS 为例，首先你需要通过第三方AE插件Bodymovin将你的动画导出成JSON格式的数据，然后再在iOS 开发的时候使用Lottiet将JSON格式的数据转换成原生动画。下面就举一个具体的列子来说明下如何使用Lottie。首先我在AE里面做了这样一个动画。第一步使用Bodymovin，将动画转换成JSON格式的。这个AE插件其实是为了将动画转成Web格式的，转好以后其实已经可以放到Web上去了。我们的目标是让动画在原生的环境下播放，这个时候就该Lottie出场了。&&&&-以下内容会出现少量代码，会感到不适者可快速通过&&&&&-首先在你原有的iOS 项目里面加入Lottie，同时将你之前导出的JSON文件也加进去。然后在自己的项目里import Lottie，接下来只需要创建一个LOTAnimationView就可行了，你可以简单将它理解为是一个放图片的容器，正常情况下我们使用的是一个imageView作为容器，并将设计师提供的切图放在里面。而这个LOTAnimationView里面放的则是我之前导出的动画。let animationView = LOTAnimationView.animationNamed(&demo&)上面的&demo&就是AE里导出的JSON文件的名字，接下来只需调用一下播放就能开始播放动画了。animationView?.play&&&&-代码部分结束，可以睁眼了&&&&&-IOS 下运行的效果可以看到这个动画和AE里的有些区别，最后炸开的效果没有了。炸开的效果我是用Repeater做的，实际上只是做了一个，其它的都是重复这一个的效果。显然Lottie并不支持Repeater。Airbnb说他们会尽量让Lottie支持更多AE里面的功能（想了解支持的AE里的功能可以看这里：/airbnb/lottie-ios）。虽然现在并不能做到只要你能在AE里做出来的，就能转成原生动画，不过个人认为，现在支持的功能也够用了。既然最后炸开的效果不能用Repeater做了，那就老老实实自己一个个复制出来后再调整。调整好后重新导出JSON文件，放到iOS项目里，这次就可以正常播放了。那么Lottie到底支持对动画进行哪些操作呢。我暂时还没有在官网找到详细的API说明，根据我实际的试用和一些介绍，大致找到了这些主要功能:play/pause&&暂停/播放。resize&&缩放。因为整个图都是根据代码生成的，所以不存在放大失真的问题，可以任意缩放。并支持aspectFit, aspectFill scaleFill缩放模式。loop&循环，可以让动画循环播放。Duration&动画时长，对的，即使AE里导出的文件已经包含时长了，但是你还是可以通过代码重新调整时长。speed up/slowed down&加速/减速&可以控制动画的播放速度。Progress&动画进度，数值为0-1，这个相当于是动画的进度条，你可以通过手势等一系列方式来控制动画的进度。LOTTIE 主要功能通过试用，大概可以把Lottie理解为一个动画播放器。和我们常用播放器一样，你可以播放，快进，拖动进度条等。而从AE里面导出来的JSON 文件就是播放的内容。了解了上面这些东西，就可以分析一下Lottie的使用场景了。尽管Lottie提供了很多种控制方式，但是却不能改变播放的内容。回到文章开头的飞行动效，能否使用Lottie来实现呢？答案似乎是否决的，即使可实现Calgary到Moscow这条飞行路线，一旦换一下地点，Lottie就无能为力了，毕竟动画的内容里只有这一条路线。总结：Lottie能让AE里的动画在原生环境下播放，同时还支持对动画的一些交互，大大地节省了开发的时间。即使它并不支持AE里所有的功能，但是对于App的动效来说也是足够用了。Lottie并不支持修改动画里面的内容，对于内容会变化的动效，Lottie并不适用。Lottie最合适的使用场景是做动态图标，引导页面等内容相对独立的动效。
打开微信“扫一扫”，将本文章分享到朋友圈
快给朋友分享吧！
30人已收藏
Ctrl+Enter
你的打赏就是我的动力！
悄悄说，听说打赏的人收入都比我高，不信你试试。
注: 打赏金额随意，完成后，请手动关闭本窗口。
Ctrl+Enter
您将要删除您的编辑推荐大作
AE能做的动效，都能在App中实现了？
在她入驻到UI中国的日子里
总共吸引了2227位设计师的驻足流连
总共收获了23位设计师的由衷赞赏
总共获得了30位设计师的悉心珍藏
总共引起了2位设计师的深入讨论
依然要删除吗？一起来制作，学习AE动效
在给公司做引导动画自己的一个想法。通过UFO 方式去引导告诉用户一个功能。
大家好，写在最前面的，鄙人刚刚入职动效半年吧（静态也做，主要是动态那些事），刚刚完成一件大事，心情贼好，于是写了一个教程。这个案例是关于工作内容的一个引导的动画，不过因为是强制性引导被pass了。下次加油 ，干巴爹：Ｄ。第一次发表东西不好的地方还请见谅\(≧▽≦)/。先让我们看看这个动画带完整效果的。OK ！进入教程。1 当然是先思考问题，大致上是通过一个脑暴，然后大家说说自己的想法。然后我觉得可以用一个UFO可以表现那个功能的引导。接着我就开始寻思画UFO，然后就开始了逛追博之旅啦。& & & & & &这个就是我在追博上找的源，不要介意啊，楼主只是一个动态设计师，在PS拟物化那方面并不具备优势。然后就找了3个 &，觉得那个下面的最喜欢就看着画了。这种东西如何画楼主是没有资格教大家的，拟物大家都肯定比我在行啦。吧唧吧唧 继续往下走。2.其实，下方那个图已经表达了楼主的当时思考的内容，大致就是被飞碟掳走一些ICON，然后把新发现也拉出来了。目的是就是引导用户这里有一个功能是能提供APP的哟。咱们继续 ，记得放入ＡＥ中要进行智能对象的操作，不然材质那些东西带不过去哟。＼（≧▽≦）／3.导入AE当中，这些都是基本操作就不一一赘述了（记得带材质的转智能对象哦）。然后大家下一个帅气点的BG ，楼主的当时用的是默认的壁纸，但是后来觉得不合适就换成了一个夜空。如上图吧。将飞碟预合成放入即可。4首先楼主的想法是，不能做一个平面的直来直去的那样，太呆了，毕竟天空那么大，可以任你飞哦，所以我就想着通过各种手法给人一种飞来飞去的赶脚。O(&_&)O哈哈~所以这里要利用路径去画 尽可能那种赶脚。我的灵感参考~然后我就想着 我的飞碟也不能直来直去的飞，太傻了我也得做的有转弯的赶脚和天空空旷的赶脚。于是 你看到的是这样的。& & & & & & & & & & & & & & & & & &5在空中飞出去再飞进来利用了一个小技巧，就是圆做路径，然后让飞碟沿着这个圆（路径进行飞）& & & & & & & & & & & & & & & & & & & & & & & & & & & & &然后用圆做路径其实这个圆的路径点是可以自己移动的，so你移动根据你想要的感觉来，我想表达的就是从外面飞进来->飞出去->飞进来->发现想要的icon->飞走。具体实现方法是&将mask或路径paste到运动物体的position属性中就可以了，记住copy时选中mask或路径的shape属性，关键帧是自动添加的，很方便怎样让物体沿路径运动？选择路径，拷贝其SHAPE属性。选择需要动画的POSTIION属性，粘贴即可&引用百度知道。6 在飞到正中间的时候飞碟停下来了，切记不是很生硬的停下来，不是光按f9就完事了，而是应该有种急刹车的感觉，一方面这样符合告诉运动的物体停下来的赶脚，另外一方面是给人一种&飞碟因为某些特别的原因而停下来 &对下文进行提示。&O(&_&)O。仔细看那视频2S那里，有个急刹车的感觉。7然后紧接着出现感叹号变现出惊奇，这个地方的感叹号选择个好看点的，这样更加有趣更加有漫画的赶脚。& & & & & & & & & & & & & & & & & & & & & & &&然后放射性光纤就出来啦，这里没使用直接变黄然后黄色光纤，而是利用类似快门的赶脚，一闪一闪，然后光纤照下来了，这里的放射光纤是在PS中就画好了的，在AE中就直接用了蒙版，调整蒙版大小。& & & & & & & & & & & & & & & & &&8按照参考图，放射光纤下来了，肯定是想吸走某些东西，大部分电影是人类，畜生，等带回去研究，但是我这里是为了公司一个&发现&功能，所以是App Icon。在这里使用了一个插件，他的名字叫duik。一般情况下是用来做骨骼动画的，不过我这里用的是他的弹性功能。为什么要用呢？因为我懒得做弹性，插件生成的也自然。 这里的弹性主要是用于 发现的那条横线以及&发现&的文字。仔细看视频会发现在被飞碟吸上去的时候，会有来回回弹（右下角的的spring），之所以这么做是想把这个发现功能给引出来，顺便再吸走几个icon让用户知道这里有App并且外星人都喜欢哟。&& & & & & & & & & & & & & & & & & & &9 然后icon不规则的上去呗，app 的R ，P &，S ，都改改 然后时间上自己调调，这里可以使用这个插件。（手动也可以哦 ）。& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &10在做这一块的时候我想起来一件事，就是奥特曼没电的时候总是很牛逼，所以在icon被吸上去后我做了一个外发光给UFO的玻璃。（这个在GIF中看不到的），这样给人感觉也更好，UFO吸到了好东西，& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &11然后继续是一个起跑的那种倾倒姿势，别问我为什么 ，tom猫和jerry中tom每次抓jerry起跑都是这样的。冲出去啦。yes。这个小的动画就完成鸟。希望大家喜欢。巴拉巴拉 & 断断续续写了1周。第一次写教程不好的地方请指正。阿里嘎多。
打开微信“扫一扫”，将本文章分享到朋友圈
快给朋友分享吧！
66人已收藏
Ctrl+Enter
你的打赏就是我的动力！
悄悄说，听说打赏的人收入都比我高，不信你试试。
注: 打赏金额随意，完成后，请手动关闭本窗口。
Ctrl+Enter
您将要删除您的编辑推荐大作
一起来制作，学习AE动效
在她入驻到UI中国的日子里
总共吸引了5868位设计师的驻足流连
总共收获了64位设计师的由衷赞赏
总共获得了66位设计师的悉心珍藏
总共引起了13位设计师的深入讨论
依然要删除吗？反白icon图标合集图片下载PSD素材-其他-我图网
36881&结果
111297&结果
23279&结果
17602&结果
反白icon图标合集
我图网提供精品流行反白icon图标合集素材下载，设计作品简介： 反白icon图标合集,模式：CMYK格式高清大图，使用软件为软件： Photoshop (.PSD)
【本作品下载内容为:"反白icon图标合集"模板，其他内容仅为参考，如需印刷成实物请先认真校稿，避免造成不必要的经济损失。】
【声明】未经权利人许可，任何人不得随意使用本网站的原创作品（含预览图）,否则将按照我国著作权法的相关规定被要求承担最高达50万元人民币的赔偿责任。
猜你喜欢：
反白icon图标合集
审核通过后，系统会直接将我图币发放到您的账户。
目前奖励范围只包含以下三个原因：
盗版/重复的作品：
指该作品与站内已有作品相同或相似度较高。举报
该作品需提供相似作品的链接。
违反法律法规的作品：
指该作品含有国家或政府颁发的证件或含有色情、淫秽、赌博、贩毒、暴力、凶杀、反动、泄漏国家秘密、危害国家安全等违法不良信息的作品。
侵犯版权的作品：
指该作品含有他人已注册版权内容的作品，如含有迪斯尼，喜洋洋等已注册版权内容的作品。
欢迎您参与举报，与我们一起维护网站作品的纯净！
重复/盗版的作品
违反法律法规的作品
侵犯版权的作品
请提供原作品链接(必填)
专注正版设计作品交易平台
我图网为3200万位老板，设计师，白领，老师，
行政后勤，管理人员等提高工作效率
在线客服:咨询热线:400-600-852610分钟用ae制作一枚动画表情教程
打开微信“扫一扫”，将本文章分享到朋友圈
快给朋友分享吧！
237人已收藏
Ctrl+Enter
你的打赏就是我的动力！
悄悄说，听说打赏的人收入都比我高，不信你试试。
注: 打赏金额随意，完成后，请手动关闭本窗口。
Ctrl+Enter
您将要删除您的首页推荐大作
10分钟用ae制作一枚动画表情教程
在她入驻到UI中国的日子里
总共吸引了25145位设计师的驻足流连
总共收获了116位设计师的由衷赞赏
总共获得了237位设计师的悉心珍藏
总共引起了29位设计师的深入讨论
依然要删除吗？