1. 仿手机QQ消息小红点动画1

    Author: Charles Zhu
    Summary: 动画学习

    前言

    偶然发现iPhone QQ 显示消息条数的小红点可以响应动作事件,也有人问我这样的动画该怎么做,这里就把实现的思路简单的描述一下。在实现的过程中,同样发现该功能并没有看到的那么简单,要做一个完备的动画效果需要有一定的功底。因此,本篇会先侧重于实现思路,并不会实现一个一模一样的效果。
    下面是iPhone QQ小红点的动作交互效果:
    iPhoneQQ

    分析

    首先我们分析拖拽时候的表现:

    1. 原先的小红点顺着手指移动,并与原来所处位置通过一个小尾巴(即移动的轨迹)连接
    2. 与原先位置在一定范围内时,小尾巴出现;超过一定范围时,小尾巴不出现
    3. 释放手指,小红点回到原先位置,并有弹簧动画效果
    4. 释放手指时离原先位置超过一定范围则不返回原点,而是有消失的泡沫动画

    抛开细节,抓住要点,我归纳了几个要点:

    1. 小原点随手指移动
    2. 小尾巴分情况出现
    3. 手指释放后,小红点弹回原先位置

    除此之外,红点上的文字,消失等情形的处理不是主要问题,我们先缓一缓。

    实现

    红点的移动

    首先实现一个圆形的view,并且可以随手指移动。在一定移动范围内 ...

    Tagged as : quartzcore

Page 1 / 1