ImageView属性动画

编程入门 行业动态 更新时间:2024-10-25 06:24:39

ImageView<a href=https://www.elefans.com/category/jswz/34/1771415.html style=属性动画"/>

ImageView属性动画

有图有真相:(博客的图片限制2M。只能把GIF压缩再压缩再压缩。。)


首先就是属性动画简介

ValueAnimator类可以为你的控件设置一些属性动画。

可以是int、float、颜色或者object


// 初始化ValueAnimator
ValueAnimator animator = ValueAnimator.ofInt(0, 200);
animator.addUpdateListener(ValueAnimator.AnimatorUpdateListener);// 设置动画的监听器
animator.setDuration(long);// 动画持续时间
animator.setInterpolator(TimeAnimator); //设置动画的变化速度
	setInterpolator(new AccelerateDecelerateInterpolator());//:先加速,后减速
	setInterpolator(new  AccelerateInterpolator());//:加速
	setInterpolator(new DecelerateInterpolator());//:减速
	setInterpolator(new CycleInterpolator());//动画循环播放特定次数,速率改变沿着正弦曲线
	setInterpolator(new LinearInterpolator());//匀速

animator.setStartDelay(0); //启动延时
animator.start();

监听器的使用:

class MyAnimatorListener implements ValueAnimator.AnimatorUpdateListener {

    public MyTransXAnimatorListener() {
    }@Override
    public void onAnimationUpdate(ValueAnimator animation) {
	// 动画会在执行过程中多次调用次方法
int dx = (Integer) animation.getAnimatedValue(); L.d("dx的值是:" +dx); }}


其次是ImageView的动画设置


要实现图片移动效果,需要改变ImageView的图像,而不是改变ImageView。

因为给ImageView设置位移动画,ImageView会直接移动到别的位置上。不是我们需要的效果。


这里需要使用一个类  --->  Matrix

这个类对图像的处理主要有四种类型:

1、Translate ---> 平移变换
2、Scale ---> 缩放变换
3、Rotate ---> 旋转变换
4、Skew --->倾斜变换


Matrix提供了一些方法来控制图片变换:

这些方法提供了三种执行形式:

pre、post、set

pre是在队列最前面插入,

post是在队列最后面追加,

而set先清空队列在添加(这也是“Matrix没有结构体,它必须被初始化,通过reset或set方法”的原因)。

其中的一些set方法如下:(pre、post相似)
setTranslate(float dx,float dy)//控制Matrix进行位移。
setSkew(float kx,float ky)//控制Matrix进行倾斜,kx、ky为X、Y方向上的比例。
setSkew(float kx,float ky,float px,float py)//控制Matrix以px、py为轴心进行倾斜,kx、ky为X、Y方向上的倾斜比例。
setRotate(float degrees)//控制Matrix进行depress角度的旋转,轴心为(0,0)。
setRotate(float degrees,float px,float py)//控制Matrix进行depress角度的旋转,轴心为(px,py)。
setScale(float sx,float sy)//设置Matrix进行缩放,sx、sy为X、Y方向上的缩放比例。
setScale(float sx,float sy,float px,float py)//设置Matrix以(px,py)为轴心进行缩放,sx、sy为X、Y方向上的缩放比例。


最后是实现

xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android=""
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/splash_bg"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="matrix"
        android:src="@drawable/y3"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:layout_height="match_parent">
        <su.levenetc.android.textsurface.TextSurface
            android:id="@+id/splash_text"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
             />
        <Space
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="1"/>
    </LinearLayout>
</RelativeLayout>

这里需要注意的是: ImageView的scaleType属性必须是matrix,不能是其他,不然不能使用Matrix来改变图像。 android:scaleType="matrix"


java代码:

在onCreat中添加如下代码:

img = (ImageView) this.findViewById(R.id.splash_bg);
img.post(new Runnable(){@Override
    public void run() {//获得ImageView中Image的真实宽高,
        int dw = img.getDrawable().getBounds().width();
        int dh = img.getDrawable().getBounds().height();

        //获得ImageView中Image的变换矩阵
        Matrix m = img.getImageMatrix();
        float[] values = new float[10];
        m.getValues(values);

        //Image在绘制过程中的变换矩阵,从中获得x和y方向的缩放系数
        float sx = values[0];
        float sy = values[4];

        //计算Image在屏幕上实际绘制的宽高
        float cw = (dw * sx);
        float ch =(dh * sy);
        int height = img.getHeight();
        Matrix matrix = new Matrix(img.getImageMatrix());
        float s = height/ch;
        L.d("缩放系数是:"+s+"  宽高是:"+height + "   "+ ch);
	// 因为scaleType="matrix"。图片在ImageView中不会放大也不会缩小。我们需要手动让图片放大并居中
matrix.postScale(s,s);//按照比例放大,是图片高度等于控件高度
matrix.postTranslate(cw-(cw*s),0);//设置偏移,是图片居中(实际上不是正中间,不过不影响)
img.setImageMatrix(matrix); // 初始化ValueAnimator ValueAnimator animator = ValueAnimator.ofInt(0, 200); animator.addUpdateListener( new MyAnimatorListener(img.getImageMatrix())); animator.setDuration(4000); animator.setInterpolator(new DecelerateInterpolator()); animator.setStartDelay(0); animator.start(); }});

MyAnimatorListener的实现:

class MyAnimatorListener implements ValueAnimator.AnimatorUpdateListener {private Matrix mMatrix;
    public MyAnimatorListener(Matrix matrix) {mMatrix = new Matrix(matrix);
    }@Override
    public void onAnimationUpdate(ValueAnimator animation) {int dx = (Integer) animation.getAnimatedValue();
        Matrix matrix = new Matrix(mMatrix);
        matrix.postTranslate(dx, 0);
        img.setImageMatrix(matrix);
    }
}









更多推荐

ImageView属性动画

本文发布于:2024-02-25 21:23:19,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1700334.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:属性   动画   ImageView

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!