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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
几款常用手势动画的制作教程
0.0°
2018-09-25 好文转载 教程 原作者: 未知 举报 1235 5 2 0
  1. 单击、双击、长按、拖拽、缩放、旋转等常用手势动画

  Hello大家好!这次我要分享一款原创的手势小动画库(就是Demo中的那个小圆点点)。既然能称之为“库”,那一定要符合随时调用,可复用的特点。我也是为此琢磨了好一阵,制作了这么一款手势库(很可惜我不会制作脚本插件,只能以ape工程文件的形式调用,脚步插件是接下来的努力方向!)。

  那么先简单介绍一下这个手势小动画库吧。里面包含:单击、双击、长按、拖拽、缩放、旋转等常用手势;单击、长按和拖拽支持单指、双指、三指。功能不多,但基本符合大部分场景需要。


【常用手势】

Image title

Image title

Image title

Image title

Image title

Image title

【使用方法】

首先将手势.ape文件拖拽进你的工程文件中。点开手势合成,复制你需要的手势图层到你要加手势的合成中;
单击/双击/长按手势的使用方法:
①只需点开位置属性,定位好圆点位置和出现的时机,然后打一个关键帧即可(可以理解为做一个记号)。你还可以通过效果效果控件对圆点进行一些细节调整,如大小,透明度,双指,三指等等;(如下图所示)
②勾选双指,三指可以激活更多的小圆点;
③通过调整“持续时间”可以实现长按的效果;
④效果控件中有个“透明度映射”,可以将Press状态按钮的透明度关联它,即可轻松实现点击效果;(可以参照附件中的示例文件)

Image title

拖拽手势的使用方法:

①只需点开位置属性,定位好圆点位置和出现/结束的时机,然后打2个或以上关键帧即可(第一个关键帧控制出现动画,最后一个关键帧控制消失动画)。
你可以:
a.直接在手势图层的位置属性进行K帧;
b.通过父级关联到其他图层;
c.通过表达式关联到其他图层;
②勾选双指,三指可以激活更多的小圆点;
④效果控件中有个“移动距离映射”,先新建一个空图层并将其位置属性表达式关联到“移动距离映射”的滑块上,然后将你想要和圆点位移关联在一起的图层父级到空图层即可;(可以参照附件中的示例文件)

Image title

缩放&旋转手势的使用方法:

①只需点开位置属性,定位好圆点位置和出现/结束的时机,然后打2个或以上关键帧即可(第一个关键帧控制出现动画,最后一个关键帧控制消失动画)。然后对手势图层的位置属性进行K帧;
②(温馨提示)旋转动画要对效果控件中的“旋转角度”进行K帧哦!
④效果控件中有个“缩放映射值”和角度映射值,同样可以通过表达式关联将其关联出去;(可以参照附件中的示例文件)                                                  

Image title


本着兴趣和提高工作效率的想法,花了点时间制作了这么一个“小预设动画”分享给大家,希望有需要的同学能够喜欢哦!(附件请用AE CC 12或以上的版本打开)

谢谢观看!

往期精彩推文:

月薪过万UI设计正确的学习步骤:http://dwz.cn/1vYyOBEU


课程资源分享:

photoshop精品案例课程一学就会:http://www.ui.cn/detail/384613.html

全套photoshop零基础人像修饰教程大汇总:

http://www.ui.cn/detail/384613.html

PS精品素材、21款设计常用字体,共15G免费送:

http://www.ui.cn/detail/384613.html







更新:2018-09-25

收藏

5人已收藏

平面设计指导

有学习方面问题加盛老师V信:321644621

  • 81

    作品

  • 191

    粉丝

  • 1

    关注

  • 平面设计教程-代金劵设计
  • 平面设计教程-开业大吉海报制作
  • 绘制漂亮的调色盘
  • 下载按钮图标设计教程

    猜你喜欢

      2018-09-25 好文转载 教程 原作者: 未知 举报 1235 5 2 0

      几款常用手势动画的制作教程

      0.0°

      你确定要举报几款常用手势动画的制作教程

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2018年09月25日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      2
      5
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录