美文网首页
动画效果分析

动画效果分析

作者: sbopl | 来源:发表于2016-05-19 22:06 被阅读54次

前几天逛github的时候看到一个下拉动画效果挺不错,就扒拉下来看源码了,今天来分析分析动画效果是怎么形成的。
github地址


看效果,物体下落弹起的时候切换物体,下面的文字呈现阻尼效果。物体的下落、弹起,都是使用View动画,下落时使用加速,弹起时使用减速,在下落的时候监听动画结束,在结束时开启弹起动画,在弹起动画结束时开启下落动画。今天主要分析文字的阻尼效果。

<pre>
<code>
void drawArcPath() {
</code>
<code>
mPath.reset();
</code>
<code>
mPath.moveTo(0, PAINT_TEXT_BASEIINE); //设定起始点
</code>
<code>
mPath.quadTo(0,PAINT_TEXT_BASEIINE,5,PAINT_TEXT_BASEIINE);
</code>
<code>
mPath.quadTo(mTextWidth/2,PAINT_TEXT_BASEIINE + mRecfSpace,mTextWidth-5,PAINT_TEXT_BASEIINE);
</code>
<code>
mPath.quadTo(mTextWidth*5/6,PAINT_TEXT_BASEIINE,mTextWidth,PAINT_TEXT_BASEIINE);
</code>
<code>
mPath.close();
</code>
<code>
}
</code>
</pre>
上面这段是关键代码,quadaTo画二阶贝塞尔曲线的,关键在第三个quadTo,里面有个mRecfSpace。

  • 初始化
    在Activity中初始化的时候调用以下方法画了条直线
    <pre>
    <code>void drawLinePath() { </code>
    <code>
    mPath.moveTo(0, PAINT_TEXT_BASEIINE); //设定起始点
    </code>
    <code>
    mPath.lineTo(mTextWidth, PAINT_TEXT_BASEIINE);//第一条直线的终点,也是第二条直线的起点
    </code>
    <code>
    mPath.close();
    </code>
    <code>
    }
    </code>
    </pre>
    调用一下方法初始化状态码和mRecfSpace
    <pre>
    <code>
    void reset(Canvas canvas){
    </code>
    <code>
    mRecfSpace = 0;
    </code>
    <code>
    drawArcPath();
    </code>
    <code>
    mCurveStatus = STATUS_FLAT_CURVE;
    </code>
    <code>
    }
    </code>
    </pre>
  • 在下落动画监听结束状态,调用startAnim开始动画效果
    <pre>
    <code>
    public void startAnim() {
    </code>
    <code>
    mSringCount = 0;
    </code>
    <code>
    mCurveStatus = STATUS_DOWN_CURVE;
    </code>
    <code>
    invalidate();//重新ondraw
    </code>
    <code>
    }
    </code>
    </pre>
    当mSringCount小于18时会不断invalidate
    1.在Down状态码下mRecfSpace 每次都会+6,当>=36时,即重画了6次曲线,每次向下弯曲程度加深,然后到最低点时,状态码转为UP。
    2.然后每次重画曲线,显示上弹效果,mRecfSpace 每次-6,当为-12时,即重画了8次,到了最高点(quadaTo控制点的Y为28),状态码转为Down。3.mRecfSpace 每次又会+6,mSringCount还剩3次,第17次时mRecfSpace 为6(quadaTo控制点的Y为46),曲线微微弯曲,然后就调用reset重置。一次动画结束。

相关文章

  • 仿菁优网首页动画效果

    1、菁优网首页动画效果图 2、动画效果分析 1、动画效果一定是UIView动画,因为核心动画是CALayer的动画...

  • 自定义View-27 仿58同城加载数据动画

    效果 1、效果分析 1.1、加载显示组合控件(布局) 1.2 、分析动画实现 1.2.1:下落动画同时阴影缩小,当...

  • 动画效果分析

    前几天逛github的时候看到一个下拉动画效果挺不错,就扒拉下来看源码了,今天来分析分析动画效果是怎么形成的。gi...

  • 仿QQ音乐动画

    动画效果: 对动画作如下分析(这个分析方案肯定不是唯一和最优的,其实实现这个动画效果不难): 主界面是一个导航栏控...

  • Android动画 - 仿58同城加载动画

    Android动画 - 仿58同城加载动画 效果图 分析动画 首先分析动画,如上图所示:动画分为三部分,分别为上方...

  • iOS 圆球加载动画解析

    一、显示效果 二、原理分析 1、拆解动画 从效果图来看,动画可拆解成两部分:放大动画、位移动画放大动画 比较简单,...

  • CoreAnimation | 核心动画 | 粒子动画 | 点赞

    效果展示 效果分析 图片变了大小变了爆炸效果(CAEmitterLayer) 属性创建 粒子动画初始化以及属性之间...

  • iOS动画-实现QQ消息拖拽效果

    先上一张效果图: 首先分析一下动画,是由哪些简单动画组成的,分析完成之后,把这些动画结合到一起就是复杂动画了: 一...

  • iOS购物车动画实现

    1.动画效果图 2.动画分析 购物车动画主要用了核心动画中的关键帧动画,即CAKeyframeAnimation,...

  • Android动画 - 仿花束直播加载动画

    效果图 分析动画 首先分析动画,如上图所示:动画由三个圆形几何图形组成,中间圆形图案不动,左侧右侧圆形图案向中间平...

网友评论

      本文标题:动画效果分析

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