Android XML绘图与属性动画


Android XML绘图:

一文足以:https://blog.csdn.net/yangshangwei/article/details/51190974

比如画圆:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
    android:color="#666666"/>
<size
    android:width="120dp"
    android:height="120dp"/>
</shape>

Android使用Path绘图:

http://www.10tiao.com/html/227/201606/2650236149/1.html

Android属性动画:

Google官方把动画分为:View Animation、Drawable Animation、Property Animation

实际则对应以下:

Tween Animation:通过对场景里的对象不断做图像变换(平移、缩放、旋转)产生动画效果,即是一种渐变动画;
Frame Animation:顺序播放事先做好的图像,是一种画面转换动画。
Property Animation:属性动画,通过动态地改变对象的属性从而达到动画效果,属性动画为API 11新特性。

属性动画看上去复杂,但事实上已经足够简单。属性动画系统可以让你定义动画的以下属性:时长、时间插值、重复次数、动画集Animator sets、帧频率。

基本使用:

/**
 * 缩放动画
 * @param v 被缩放的view
 */private void scale(View v){
    ObjectAnimator anim = ObjectAnimator.ofFloat(v, "scaleX", 2f);//x方向放大两倍
    anim.setDuration(1000);//时长
    anim.setRepeatCount(2);//重复次数
    anim.setRepeatMode(ValueAnimator.REVERSE);//重复时相反的方向恢复到原来的样子
    anim.setInterpolator(new AccelerateInterpolator());//设置插值器为加速度
    anim.start();
}

这里的ofFloat方法中参数列表如下:

第一个参数是要操纵的对象view
第二个参数是属性,比如"x","y","pivotX","translationX","rotationX","scaleX","scaleY"等
第三个参数是可变数组参数,是本属性动画相应的变化值。

上面只提到了scaleX,其实还有以下:

translationX and translationY:这两个属性控制view距离其布局容器的左上角坐标的偏移量
rotation, rotationX, and rotationY:这些属性控制围绕轴点进行的2D和3D的旋转
scaleX and scaleY: 控制视图绕其轴点的x轴,y轴的缩放倍数
pivotX and pivotY:控制轴点的位置,围绕该点旋转和缩放变换发生。默认情况下,轴点位于对象的中心。
x and y: 用于描述在其容器视图中的最终位置,作为左侧值和顶部值以及translationX和translationY值的总和。
alpha:View视图的透明度,0是完全透明,1是不透明

组合动画:

一般情况下,我们不会仅仅只使用一种动画,所以需要组合,于是有了AnimatorSet

/**
 * @param v  执行动画的view
 * @param startBounds  开始的边界
 * @param finalBounds  结束时的边界
 * @param startScale  开始的拉伸比率
 */public void startZoomAnim(View v, Rect startBounds, Rect finalBounds, float startScale) {
    AnimatorSet set = new AnimatorSet();
    set.play(
            ObjectAnimator.ofFloat(v, "x", startBounds.left, finalBounds.left))
            .with(ObjectAnimator.ofFloat(v, "y", startBounds.top, finalBounds.top))
            .with(ObjectAnimator.ofFloat(v, "scaleX", startScale, 1f))
            .with(ObjectAnimator.ofFloat(v, "scaleY", startScale, 1f));
    set.setDuration(200);
    set.setInterpolator(new DecelerateInterpolator());
    set.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            //
        }

        @Override
        public void onAnimationCancel(Animator animation) {
            //
        }
    });
    set.start();
}

以上为一个x,y轴同时拉伸的动画。你会发现其实是使用with将单个属性动画组合起来执行,有没有一种rxJava的感觉。当然这里是同时执行的。

上面有一个插值器,什么是插值器?这里推荐一篇图文:

http://hencoder.com/ui-1-6/

最好,没有之一。

经过以上了解,如果要一个旋转着放大并结合淡入淡出的效果该怎么写?

public static void setAnimatorIn(View view,AnimatorListenerAdapter animatorListenerAdapter){
    AnimatorSet set = new AnimatorSet();
    set.play(
//淡入 从透明度0.7到不透明1 设置最后效果也是不透明1 如果后面改为0 则为70%透明->不透明->完全透明
            ObjectAnimator.ofFloat(view, "alpha", 0.7f, 1,1))
//旋转 从270度到360 度 你也可以逆时针 则为(~,~,360,270)
            .with(ObjectAnimator.ofFloat(view, "rotation", 270, 360))
//x轴拉伸 0到1 最后为1原状 结合y轴 则为从小到原来的大小 放大效果
            .with(ObjectAnimator.ofFloat(view, "scaleX", 0, 1,1))
            .with(ObjectAnimator.ofFloat(view, "scaleY", 0, 1,1));
    set.setDuration(300); //间隔300毫秒
    set.setInterpolator(new AccelerateInterpolator());//插值器 动画效果为:在整个动画过程中,一直在加速,直到动画结束的一瞬间,直接停止。
    set.addListener(animatorListenerAdapter);
    set.start();
}

以上,属性动画你应该熟悉了。

这里有一篇更详细的文章:https://blog.csdn.net/harvic880925/article/details/50598322

参考:https://www.jianshu.com/p/a869bf2b67f9

官方文档:https://developer.android.com/guide/topics/graphics/prop-animation#object-animator

 

声明:TIL|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA[ZH]协议进行授权

转载:转载请注明原文链接 - Android XML绘图与属性动画


Life is very interesting. In the end, some of your greatest pains become your greatest strengths.