您当前的位置: 首页 >  动画

Kevin-Dev

暂无认证

  • 3浏览

    0关注

    544博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

【Android -- 动画】矢量图 & 矢量动画(下)

Kevin-Dev 发布时间:2017-03-15 16:05:19 ,浏览量:3

不断学习,做更好的自己!💪

视频号CSDN简书欢迎打开微信,关注我的视频号:KevinDev点我点我 矢量动画

矢量动画其实是属性动画系统的一个应用。 矢量动画可以有多种动画效果:

  • group 对应的旋转/缩放/平移等效果是传统的动画效果。
  • path 对应的属性可以做出很多绚丽的效果。比如改变 pathData 属性,可以做出形状变化的动画;改变 trimPathStart/trimPathEnd 可以做出绘制曲线路径的效果;改变 strokeColor 可以做出线条颜色变化的效果。
  • clip-path 的 pathData 变化可以做出各种形状的揭开和遮挡的效果。
实例 效果图

正三角形转正方形.gif

1. 定义矢量图形

在 res/drawable 内定义一个三角形矢量图的 XML


    
        
    

2. 定义矢量动画

XML 文件也定义在 res/drawable 内,本质上也是一个 drawable 资源.


    
    

3. 定义属性动画

XML 文件定义在 res/animator 内 path_change.xml



rotate_animator.xml



4. 集成运行动画

布局文件:


代码:

public class MainActivity extends AppCompatActivity {
    private ImageView mImageView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mImageView = findViewById(R.id.imageview);
    }

    public void show(View view) {
        ImageView imageView = (ImageView) view;
        Drawable drawable = imageView.getDrawable();
        if (drawable instanceof Animatable) {
            ((Animatable) drawable).start();
        }
    }
}
第三方库
  1. vectalign 主要功能就是通过计算修改两个 SVG 的路径使其可以无缝切换。

  2. RichPath 在代码中自如的控制 Path 和属性,比起纯资源文件可操作性更高。

关注
打赏
1658837700
查看更多评论
立即登录/注册

微信扫码登录

0.0628s