美文网首页ae学习相关UI设计和UI动效玩转动效
动效篇-AE之UI动效(水波荡漾)

动效篇-AE之UI动效(水波荡漾)

作者: redBlue_ | 来源:发表于2017-03-29 16:04 被阅读275次
    klkl.jpg

    (一)UI动效常用快捷键

    Com+Y 新建固态层
    Com+D复制图层
    Com+Shift+Y 修改固态层属性
    Shift+Com+【/】置顶/置底
    Alt+[/] 裁剪时间线
    J/K 向前/后一个关键帧
    ~最大化当前面板
    Com+Shift+A 图层全部不选
    Com+Shift+D把一个图层一分为二
    B/N合成 开端/结束 时间
    Com+M渲染合成
    I/O移动时间线到层的入点/出点Ç
    Com+Shift+C把选择层作为合成
    U/W显示关键帧所在属性(被key),显示所有属性
    +/- 时间轴单位(视觉)缩放
    Com+Shift+R 旋转角度
    </>缩小/放大视图
    Alt+{/}向前后剪切
    Com+N 新建合成
    Com+M生成影片
    Com+I 导入素材
    G自由绘制蒙版
    Q默认矩形

    (二)UI动效常用插件

    1插件安装

    把插件安装到ScriptUI Panels文件夹下就可以在窗口菜单下找到插件入口,点击激活插件

    图片.png 图片.png

    2插件使用

    讲讲讲

    轴心点都是一一对应的 ,我们在做动画时可以很方便的通过工具来调节元素的轴心点


    缓动调节工具

    图片.png

    1缓入----开始很柔和
    2缓出----结束很柔和
    3缓入➕出---开始和结束很柔和

    Screen Capture on 2017-03-29 at 16-24-10.gif Screen Capture on 2017-03-29 at 16-36-15.gif

    (三)小动效(水倒入容器loading)

    1新建一个白色纯色图层 Com+Y 新建固态层

    图片.png

    复制一层Com+D复制图层,改为蓝色Com+Shift+Y

    图片.png

    给蓝色图层添加置换图效果

    图片.png

    把水平置换调节为0

    图片.png

    把蓝色图层新建预合成Com+Shift+C

    图片.png

    在预合成中新建一个灰色层

    图片.png

    给灰色层添加一个无线电波效果

    图片.png

    无线电波效果设置


    图片.png 图片.png 图片.png

    把灰色图层新建预合成Com+Shift+C

    图片.png

    模糊效果设置


    图片.png

    用蓝色层置换水波那一层,并调节置换强度

    图片.png

    新建一个形状图层

    图片.png 图片.png

    用圆形做个遮罩

    图片.png Screen Capture on 2017-03-29 at 15-23-14.gif

    复制这两层(形状图层和与合成)

    图片.png

    给最下面与合成填充个颜色,然后调整位移


    图片.png Screen Capture on 2017-03-29 at 15-30-37.gif

    把这两个预合成做父子链接


    图片.png

    调整下边预合成的位移


    图片.png

    把穿帮的地方key透明度一帧切


    图片.png 图片.png Screen Capture on 2017-03-29 at 15-42-20.gif

    钢笔工具建路径


    图片.png

    给形状图层添加修建路径


    图片.png 图片.png

    通过曲线调整运动规律(水柱下落会很有冲击感)


    图片.png Screen Capture on 2017-03-29 at 15-55-54.gif

    (四)其他注意事项

    导入psd设置


    图片.png

    相关文章

      网友评论

        本文标题:动效篇-AE之UI动效(水波荡漾)

        本文链接:https://www.haomeiwen.com/subject/upbjottx.html