在本期象牙绘UED团队分享当中,我们将详细演示用AE如何制作如下三个loading动效,

其中涉及到AE表达式的应用、值曲线调整、速度曲线编辑等知识。

对于初学者来说可能信息量略大,希望通过是视频教程能让大家更清楚流程,另外,还附赠源文件给大家作为参考,

该动效已被象牙绘官网和app应用,请勿商用。

视频如下:

第一段双子球动画,重点在于正弦函数的协调运动,我们为小球添加的运动表达式为

球一:

tempx=position[0]+14*Math.sin(time*2*Math.PI);[tempx,position[1]];

球二:

tempx=position[0]+14*Math.sin(time*2*Math.PI);[tempx,position[1]];

大家不要畏惧表达式,其实这个含义很简单的。

Position[0]和position[1]作为数组表示二维位置左边的方式,分别代表x位置和y位置。

去掉程序本身的变量和函数表达方式,小球新的横坐标可以简单的写作:

tempx=x+14*sin(t*2π)

整个动画的周期我设置为1s,即t包含与(0,1),小球的x坐标在1s的时间内完成一个周期的正弦变化。

其余两个动画看似复杂,其实简单。只需要设置好其中一个球的缓动,其余小球复制图层即可,设置时间差即可。这其中有个小技巧,设置关键帧辅助-序列图层-重叠,可以快速设置多图层的等时间差。

用AE如何制作如下三个loading动效,的更多相关文章

  1. 一个绚丽的loading动效分析与实现!

    最终效果如下 从效果上看,我们需要考虑以下几个问题: 1.叶子的随机产生: 2.叶子随着一条正余弦曲线移动: 3.叶子在移动的时候旋转,旋转方向随机,正时针或逆时针: 4.叶子遇到进度条,似乎是融合进 ...

  2. Android 一个绚丽的loading动效分析与实现!

    http://blog.csdn.net/tianjian4592/article/details/44538605 前两天我们这边的头儿给我说,有个 gif 动效很不错,可以考虑用来做项目里的loa ...

  3. 纯css loading动效

    .loading {margin: 100px;     width: 3px; height:3px;     border-radius: 100%;                      / ...

  4. Principle如何制作动效设计?简单易学的Principle动效设计教程

    Principle for Mac是一款新开发的交互设计软件.相比 Pixate 更容易上手,界面类似 Sketch 等做图软件,思路有点像用 Keynote 做动画,更「可视化」一些. 如果您还没有 ...

  5. H5动效的常见制作手法

    众所周知,一个元素,动往往比静更吸引眼球: 一套操作界面,合适的动态交互反馈能给用户带来更好的操作体验: 一个H5运营宣传页,炫酷的动画特效定能助力传播和品牌打造. 近两年,小到loading动画,表 ...

  6. 拒绝枯燥,有意思的 Loading 页面动效设计

    互联网时代,网络“提速”日益频繁,人们打开Web或软件的速度越来越快,一般页面缓冲和加载地过程也是几不可查.然而,在某些情况下,例如软件急需加载大量页面,首页急需加载大量内容,用户下载文件过大,甚至是 ...

  7. WPF与缓动(三) 指数缓动

    原文:WPF与缓动(三) 指数缓动 WPF与缓动(三) 指数缓动                                                                     ...

  8. iOS转场弹窗、网易云音乐动效、圆环取色器、Loading效果等源码

    iOS精选源码 view controller transition and popover (控制器转场和弹窗) UITableView头部悬停+UITableView侧滑嵌套 一行代码集成时间选择 ...

  9. WordPress插件制作教程(三): 添加菜单的方法

    上一篇编写了一个简单的插件,让大家对插件的简单制作有个了解,这一篇我们在更深一步,当我们激活插件后后台会显示菜单出来,然后通过单击菜单显示自己定义好的信息.激活之后会在WordPress后台显示一个菜 ...

随机推荐

  1. explict关键字

    [本文链接] http://www.cnblogs.com/hellogiser/p/explict.html [分析] explicit 只对构造函数起作用,用来抑制隐式转换. Suppose yo ...

  2. kettle转换JavaScript获取命令行参数

    日常开发中由于很多参数是变化的,需要在部署时才能确定.而写在配置文件里又显得很笨重,因而可以运行时实时指定.那么kettle是怎么获取命令行中的参数的呢? kettle可以通过转换里的JavaScri ...

  3. php字符串处理总结

    php字符串处理是php基础中重要的一部分,总结并整理了一下 1.最简单的,字符串输出单引号和双引号的区别(定义字符串用单引号和双引号都可以) $str='hello'; echo "str ...

  4. Java for LeetCode 049 Anagrams

    Given an array of strings, return all groups of strings that are anagrams. Note: All inputs will be ...

  5. UVALive 7267 Mysterious Antiques in Sackler Museum (判断长方形)

    Sackler Museum of Art and Archaeology at Peking University is located on a beautiful site near the W ...

  6. Linux vim 底下显示行号

    使用 vim /etc/vimrc 然后进入之后再 set ruler" show the cursor position all the time 底下再加上 set nu 保存退出 :w ...

  7. javaweb实现验证码功能

    在javaweb的用户注册与登陆功能时,有时为了防止漏洞或者大量注册,可以使用验证码功能,下面是验证码的一个简单实现 验证码类 public class ValiImg extends HttpSer ...

  8. FileHelper-文件操作辅助类

    using System; using System.Collections.Generic; using System.IO; using System.Text; namespace Whir.S ...

  9. 用于Simple.Data的ASP.NET Identity Provider

    今天推举的这篇文章,本意不是要推举文章的内容,而是据此介绍一下Simple.Data这个很有意思的类ORM工具. 现在大家在.NET开发中如果需要进行数据访问,那么基本都会使用一些ORM工具,比如微软 ...

  10. linux socket 编程(C语言)

    转自:http://blog.csdn.net/piaojun_pj/article/details/5920888 最近看了一些网络编程的书籍,一直以来总感觉网络编程神秘莫测,其实网络编程入门还是很 ...