ITPub博客

首页 > 应用开发 > IT综合 > 直播商城app源码实现一个SVG动画

直播商城app源码实现一个SVG动画

IT综合 作者:云豹科技阿星 时间:2021-10-15 16:31:43 0 删除 编辑

前言

在之前发了一篇关于直播商城app源码SVG动画的文章,有小伙伴反应了一些问题,所以出一篇较为详细的动画例子文章,希望有所帮助。


一、效果的实现

1.SVG图来源:阿里图库

2.svg转换为VectorDrawable工具

也可用Android自带。

3.转化后的代码

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="
    android:width="73.51dp"
    android:height="73.51dp"
    android:viewportWidth="73.51"
    android:viewportHeight="73.51">
    <path
        android:fillColor="#fcd765"
        android:pathData="M35.67,33.93s-8.5-6.22-4.85-17.76S34.13,28.61,35.67,33.93Z" />
    <path
        android:fillColor="#fcd765"
        android:pathData="M35,33.93S19,31.48,19.9,17.83,29.68,32.9,35,33.93Z" />
    <path
        android:fillColor="#fcd765"
        android:pathData="M31.48,34S16.28,43.59,11,26.54,26.36,36.91,31.48,34Z" />
    <path
        android:fillColor="#fcd765"
        android:pathData="M38.73,33.1s8.5-6.22,4.84-17.77S40.27,27.78,38.73,33.1Z" />
    <path
        android:fillColor="#fcd765"
        android:pathData="M37,34s4-12.79 0.61 -18.48C33.46,8.75,36.57,26.94,37,34Z" />
    <path
        android:fillColor="#fcd765"
        android:pathData="M39.43,33.1s16-2.45,15.07-16.1S44.71,32.07,39.43,33.1Z" />
    <path
        android:fillColor="#fcd765"
        android:pathData="M42.92,33.19s15.2,9.56,20.43-7.48S48,36.08,42.92,33.19Z" />
    <path
        android:strokeColor="#000"
        android:strokeWidth="1"
        android:strokeMiterLimit="10"
        android:pathData="M38.1,36.69S35.78,53.26,45.36,62.3" />
</vector>

给每个path加上与动画绑定的属性: 如:android:name="leaf1"

完整代码如下(hua.xml)

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="
    android:width="73.51dp"
    android:height="73.51dp"
    android:viewportWidth="73.51"
    android:viewportHeight="73.51">
    <path
        android:name="leaf1"
        android:fillColor="#fcd765"
        android:pathData="M35.67,33.93s-8.5-6.22-4.85-17.76S34.13,28.61,35.67,33.93Z" />
    <path
        android:name="leaf2"
        android:fillColor="#fcd765"
        android:pathData="M35,33.93S19,31.48,19.9,17.83,29.68,32.9,35,33.93Z" />
    <path
        android:name="leaf3"
        android:fillColor="#fcd765"
        android:pathData="M31.48,34S16.28,43.59,11,26.54,26.36,36.91,31.48,34Z" />
    <path
        android:name="leaf4"
        android:fillColor="#fcd765"
        android:pathData="M38.73,33.1s8.5-6.22,4.84-17.77S40.27,27.78,38.73,33.1Z" />
    <path
        android:name="leaf5"
        android:fillColor="#fcd765"
        android:pathData="M37,34s4-12.79 0.61 -18.48C33.46,8.75,36.57,26.94,37,34Z" />
    <path
        android:name="leaf6"
        android:fillColor="#fcd765"
        android:pathData="M39.43,33.1s16-2.45,15.07-16.1S44.71,32.07,39.43,33.1Z" />
    <path
        android:name="leaf7"
        android:fillColor="#fcd765"
        android:pathData="M42.92,33.19s15.2,9.56,20.43-7.48S48,36.08,42.92,33.19Z" />
    <path
        android:name="root"
        android:strokeColor="#000"
        android:strokeWidth="1"
        android:strokeMiterLimit="10"
        android:pathData="M38.1,36.69S35.78,53.26,45.36,62.3" />
</vector>

4.动画文件 (svg_pathanim)

本案例用的一个动画文件,也可用多个。

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="
    android:duration="4000"
    android:propertyName="trimPathStart"
    android:repeatCount="infinite"
    android:repeatMode="reverse"
    android:valueFrom="1"
    android:valueTo="0"
    android:valueType="floatType">
</objectAnimator>

5.在drawable文件夹下新建文件将svg与动画进行关联(hua_anim.xml)

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="
xmlns:tools="
android:drawable="@drawable/hua">
    <target
        android:animation="@animator/svg_pathanim"
        android:name="leaf1"></target>
    <target
        android:animation="@animator/svg_pathanim"
        android:name="leaf2"></target>
    <target
        android:animation="@animator/svg_pathanim"
        android:name="leaf3"></target>
    <target
        android:animation="@animator/svg_pathanim"
        android:name="leaf4"></target>
    <target
        android:animation="@animator/svg_pathanim"
        android:name="leaf5"></target>
    <target
        android:animation="@animator/svg_pathanim"
        android:name="leaf6"></target>
    <target
        android:animation="@animator/svg_pathanim"
        android:name="leaf7"></target>
    <target
        android:animation="@animator/svg_pathanim"
        android:name="root"></target>
</animated-vector>

6.在ImageView中引用第5步的文件

    <ImageView
        android:id="@+id/iv"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        app:srcCompat="@drawable/hua_anim" />

7.在Activity中启动动画

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private ImageView anim_path;
    private Drawable drawable;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        anim_path = (ImageView) findViewById(R.id.iv);
        anim_path.setOnClickListener(this);
}
    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.iv:
                startAnim(anim_path);
                break;
        }
    }
    /**
     * 启动动画
     *
     * @param iv
     */
    private void startAnim(ImageView iv) {
        drawable = iv.getDrawable();
        if (drawable instanceof Animatable) {
            ((Animatable) drawable).start();
        }
    }
}

欢迎在评论区讨论关于直播商城app源码实现SVG动画的内容。

声明:本文由云豹科技转发自计蒙不吃鱼博客,如有侵权请联系作者删除


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69982461/viewspace-2837597/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2020-08-24

  • 博文量
    229
  • 访问量
    78053