安卓矢量图的制作

先来看看点击前和点击后的图片,这是点击前的截图,注意点击之后是在两秒中变换的,当然你也可以自定义时间的长短


点击后如下,再说一次是缓慢变化的,不是突然的,还不会制作动态的图片,如果你知道麻烦在下面的评论告诉我一下谢谢,或者私信我也可以。


代码如下:

(1)这是一个很简洁的活动代码,可以看到我们点击事件里有一个 animate()方法,此方法是用来启动动画的,接着往下看

package com.example.k.myv;

import android.graphics.drawable.Animatable;
import android.graphics.drawable.Drawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
ImageView i;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        i = (ImageView) findViewById(R.id.imageView);
        i.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                animate();
            }
        });
    }
    private void animate(){
        Drawable d = i.getDrawable();
            if(d instanceof Animatable){
            Toast.makeText(this,"ok!",Toast.LENGTH_LONG).show();
            ((Animatable)d).start();
        }
    }
}
(2)这个是我们的objectAnimator动画,首先在res文件夹下建立一个名为animator的文件夹,我这文件名为:objectanimator1.xml,然后再其文件夹下建立一个xml文件即可,xml文件内容如下,这是我们的第一条线

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:propertyName="pathData"
    android:valueFrom="M 20,20 L 50,20 80,20"
    android:valueTo="M 20,20 L 50,50 80,20"
    android:valueType="pathType"
    android:interpolator="@android:anim/bounce_interpolator"
    >
</objectAnimator>

第二条线:文件名为:objectanimator.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:propertyName="pathData"
    android:valueFrom="M 20,80 L 50,80 80,80"
    android:valueTo="M 20,80 L 50,50 80,80"
    android:valueType="pathType"
    android:interpolator="@android:anim/bounce_interpolator"
    >
</objectAnimator>

(3)如下是VectorDrawable,也就是矢量图SVG,建立在drawable文件夹下的xml文件,我这文件名为:vectordrawable.xml不要给这些称呼吓到,其实就一个意思就是一种放大或缩小不会失真的图片而已,当然还有其他的优点,不失真只是优点之一,还有一个就是占用内存小,详细的内容大家可以百度,这里只带你入门
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="200dp"
    android:width="200dp"
    android:viewportHeight="100"
    android:viewportWidth="100"
    >
    <group>
        <!-- strokeColor:画笔颜色|strokeWidth:画笔宽|strokeLineCap:画笔线间隙 -->
        <path
            android:name="path1"
            android:strokeColor="@android:color/holo_green_dark"
            android:strokeWidth="5"
            android:strokeLineCap="round"
            android:pathData="M 20,80 L 50,80 80,80"
            ></path>
        <path
            android:name="path2"
            android:strokeColor="@android:color/holo_green_dark"
            android:strokeWidth="5"
            android:strokeLineCap="round"
            android:pathData="M 20,20 L 50,20 80,20"
            ></path>
    </group>

</vector>

第一个<path>标签里是第一条直线的一些参数,第二个就是第二条的参数,strokeColor是画笔颜色的意思,以下的相信大家可以看的懂了

(4)最后一个是我们的AnimatedVectorDrawable,在文件夹drawable下我的文件名是:animatedvectordrawable.xml,(重点请注意:在布局引用的时候就是引用这个文件名作为src的值,如android:src="drawable/animatedvectordrawable")谷歌工程师把它比喻成连接VectorDrawable和objectAnimator的胶水,作用也是如此看下面

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/vectordrawable"
    >
    <target
        android:animation="@animator/objectanimator"
        android:name="path1"
        ></target>
    <target
        android:animation="@animator/objectanimator1"
        android:name="path2"
        ></target>
</animated-vector>
好了,就这么简单,几行代码就实现了一个动画效果,如果对你有帮助,记得在下面赞一个噢!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值