Android 애니메이션 컬렉션 속성 animation-다시 보기
이 섹션 소개:
마지막 섹션에서는 Android 속성 애니메이션에 대한 예비 연구를 수행했는데, 모든 사람이 더 이상 속성 애니메이션에 익숙하지 않다고 생각합니다. 이제 이에 대한 약간의 지식을 얻었으므로 이 섹션에서는 Android 속성 애니메이션의 고급 사용 방법을 계속해서 살펴보겠습니다. 아직도 Guo Shen 님의 글 세 개를 올리고 있어요~
Android 속성 애니메이션 완전 분석(1부), 처음으로 속성 애니메이션 기본 사용법
Android 속성 애니메이션 완전 분석(2부), 고급 사용법 ValueAnimator 및 ObjectAnimator
Android 속성 애니메이션 전체 분석(2부), Interpolator 및 ViewPropertyAnimator 사용
내용은 여전히 위의 세 가지 기사를 기반으로 합니다. 좋습니다. 이 섹션을 시작하겠습니다~
1.Evaluator customization
1) 평가자 소개
이전 섹션 8.4.3 Android 애니메이션 컬렉션의 속성 애니메이션 - First Look 에서 애니메이션 사용의 첫 번째 단계는 다음과 같습니다.
ValueAnimator의 ofInt(), 를 호출합니다. ofFloat() 또는 ofObject() 정적 메서드를 사용하여 ValueAnimator 인스턴스를 생성하세요!
예제에서는 각각 부동 소수점 및 정수 데이터에 애니메이션을 적용하는 데 사용되는 ofInt 및 ofFloat를 모두 사용했습니다!
그래서 ofObject()? 초기 객체와 최종 객체? 전환하는 방법? 아니면 이걸 어떻게 사용하나요?
질문과 함께 먼저 한 가지를 이해해 보겠습니다. 사실 속성 애니메이션의 개념을 이야기할 때 이 내용에 대해 이야기했습니다.
은 애니메이션 시스템에 평가자에서 전환하는 방법을 알려주는 데 사용됩니다. 초기값부터 종료값까지 ! 좋아, 우리의 출발점이 맞았어! IntEvaluator의 소스코드에 들어가서 어떤 내용이 적혀 있는지 살펴볼까요?
TypeEvaluator 인터페이스가 구현된 다음 evaluate() 메서드가 다시 작성됩니다. 세 가지 매개변수가 순서대로 있습니다.
- fraction: 애니메이션의 완료 정도입니다. 이를 기반으로 애니메이션 계산 값은 무엇이어야 합니까?
- startValue: 애니메이션의 시작 값
- endValue: 애니메이션의 종료 값
애니메이션의 값 = 초기 값 + 완료 * (최종 값 - 초기 값)
FloatEvaluator에서도 마찬가지입니다. 초기 객체에서 최종 객체로 전환하는 방법을 시스템에 알려주려면 다음을 수행해야 합니다. TypeEvaluator 인터페이스를 직접 구현하십시오. 즉, 평가자를 사용자 정의하십시오. 더 말할 필요가 없습니다. 보기 위해 예제를 작성하십시오:
2) 사용 예
작업 렌더링 :
코드 구현:
객체 정의 Point.java 객체에는 x와 y의 두 가지 속성과 get 및 set 메소드만 있습니다~
/**
* Created by Jay on 2015/11/18 0018.
*/
public class Point {
private float x;
private float y;
public Point() {
}
public Point(float x, float y) {
this.x = x;
this.y = y;
}
public float getX() {
return x;
}
public float getY() {
return y;
}
public void setX(float x) {
this.x = x;
}
public void setY(float y) {
this.y = y;
}
}그런 다음 Evaluator 클래스를 사용자 정의합니다. PointEvaluator.java , 인터페이스를 구현하고 평가 메소드를 다시 작성하세요~
/**
* Created by Jay on 2015/11/18 0018.
*/
public class PointEvaluator implements TypeEvaluator{
@Override
public Point evaluate(float fraction, Point startValue, Point endValue) {
float x = startValue.getX() + fraction * (endValue.getX() - startValue.getX());
float y = startValue.getY() + fraction * (endValue.getY() - startValue.getY());
Point point = new Point(x, y);
return point;
}
}그런 다음 View 클래스를 사용자 정의합니다: AnimView.java, 매우 간단합니다~
/**
* Created by Jay on 2015/11/18 0018.
*/
public class AnimView extends View {
public static final float RADIUS = 80.0f;
private Point currentPoint;
private Paint mPaint;
public AnimView(Context context) {
this(context, null);
}
public AnimView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public AnimView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
private void init() {
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(Color.BLUE);
}
private void drawCircle(Canvas canvas){
float x = currentPoint.getX();
float y = currentPoint.getY();
canvas.drawCircle(x, y, RADIUS, mPaint);
}
private void startAnimation() {
Point startPoint = new Point(RADIUS, RADIUS);
Point endPoint = new Point(getWidth() - RADIUS, getHeight() - RADIUS);
ValueAnimator anim = ValueAnimator.ofObject(new PointEvaluator(), startPoint, endPoint);
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
currentPoint = (Point) animation.getAnimatedValue();
invalidate();
}
});
anim.setDuration(3000l);
anim.start();
}
@Override
protected void onDraw(Canvas canvas) {
if (currentPoint == null) {
currentPoint = new Point(RADIUS, RADIUS);
drawCircle(canvas);
startAnimation();
} else {
drawCircle(canvas);
}
}
}마지막으로 MainActivity.java~
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new AnimView(this));
}
}3에서 이 뷰를 인스턴스화합니다. ) 예제 Enhanced version
위의 예제를 바탕으로 원이 움직일 때 색상 변화를 추가해보겠습니다~ 여기서는 다른 ObjectAnimator를 사용하여 색상 변경 애니메이션을 로드합니다. int color를 사용하여 색상을 제어하고 getColor() 및 setColor() 메소드를 먼저 작성해 봅시다~
렌더링을 실행:
구현 코드:
ColorEvaluator. ：
/**
* Created by Jay on 2015/11/18 0018.
*/
public class ColorEvaluator implements TypeEvaluator{
@Override
public Integer evaluate(float fraction, Integer startValue, Integer endValue) {
int alpha = (int) (Color.alpha(startValue) + fraction *
(Color.alpha(endValue) - Color.alpha(startValue)));
int red = (int) (Color.red(startValue) + fraction *
(Color.red(endValue) - Color.red(startValue)));
int green = (int) (Color.green(startValue) + fraction *
(Color.green(endValue) - Color.green(startValue)));
int blue = (int) (Color.blue(startValue) + fraction *
(Color.blue(endValue) - Color.blue(startValue)));
return Color.argb(alpha, red, green, blue);
}
} 그런 다음 보기를 사용자 정의하고 색상을 추가하고 ObjectAnimator를 생성하고 설정합니다.
그리고 AnimatorSet을 선택한 다음 애니메이션을 결합합니다. 독자들이 질문이 있는 경우를 대비해 여기에 몇 가지만 추가하겠습니다.
그냥 다른 뷰를 만드세요~AnimView2.java:
/**
* Created by Jay on 2015/11/18 0018.
*/
public class AnimView2 extends View {
public static final float RADIUS = 80.0f;
private Point currentPoint;
private Paint mPaint;
private int mColor;
public AnimView2(Context context) {
this(context, null);
}
public AnimView2(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public AnimView2(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
private void init() {
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(Color.BLUE);
}
private void drawCircle(Canvas canvas){
float x = currentPoint.getX();
float y = currentPoint.getY();
canvas.drawCircle(x, y, RADIUS, mPaint);
}
private void startAnimation() {
Point startPoint = new Point(RADIUS, RADIUS);
Point endPoint = new Point(getWidth() - RADIUS, getHeight() - RADIUS);
ValueAnimator anim = ValueAnimator.ofObject(new PointEvaluator(), startPoint, endPoint);
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
currentPoint = (Point) animation.getAnimatedValue();
invalidate();
}
});
ObjectAnimator objectAnimator = ObjectAnimator.ofObject(this, "color", new ColorEvaluator(),
Color.BLUE, Color.RED);
//动画集合将前面两个动画加到一起，with同时播放
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.play(anim).with(objectAnimator);
animatorSet.setStartDelay(1000l);
animatorSet.setDuration(3000l);
animatorSet.start();
}
@Override
protected void onDraw(Canvas canvas) {
if (currentPoint == null) {
currentPoint = new Point(RADIUS, RADIUS);
drawCircle(canvas);
startAnimation();
} else {
drawCircle(canvas);
}
}
//color的get和set方法~
public int getColor() {
return mColor;
}
public void setColor(int color) {
mColor = color;
mPaint.setColor(color);
invalidate();
}
}그런 다음 MainActivity, setContentView를 설정하고 AnimView를 AnimView2로 변경하세요~2.Interpolator(tweener)글쎄, 우리는 트위닝에 대해 이야기하고 있습니다. 그 애니메이션~ 혹시 아직도 기억하시나요? 위의 트윈 애니메이션과 속성 애니메이션을 모두 사용할 수 있으며 트위닝 애니메이션에도 새로운
TimeInterpolator 인터페이스가 있습니다. 이 인터페이스는 이전 Interpolator와 호환되기 위해 사용되며, 이를 통해 이전 Interpolator 구현 클래스를 모두 직접 사용할 수 있습니다. 속성 애니메이션에 사용해보세요! 애니메이션 개체의 setInterpolator() 메서드를 호출하여 다양한 보간기를 설정할 수 있습니다! 먼저 뭔가를 클릭해서 공을 화면 중앙 위에서 위에서 아래로 떨어뜨려야 해요~ 그런 다음 세트 애니메이션에 대해 다음 명령문을 호출합니다.animatorSet.setInterpolator(new AccelerateInterpolator(2f));괄호 안의 값은 가속도를 제어하는 데 사용됩니다~
Running effect:
BounceInterpolator~
1) Interpolator의 내부 구현 메커니즘
먼저 TimeInterpolator 인터페이스의 소스 코드로 이동하여 getInterpolation() 메서드가 하나만 있음을 확인합니다.
간단한 설명: getInterpolation() 메소드는 입력 매개변수를 수신합니다. 이 매개변수의 값은 애니메이션이 실행됨에 따라 계속 변경됩니다. 그러나 그 변화는 매우 규칙적이다. 즉, 설정된 애니메이션 지속 시간에 따라 일정한 속도로 증가하며, 변화 범위는 0~1이다. 즉, 애니메이션이 시작되면 입력값은 0이 되고, 애니메이션이 종료되면 입력값은 1이 되며, 중간에 있는 값은 애니메이션이 실행될 때 0과 1 사이에서 변경됩니다.
여기의 input 값은 TypeEvaluator 인터페이스의 fraction 값을 결정합니다. 입력 값은 시스템에 의해 계산되어 getInterpolation() 메서드에 전달됩니다. 그런 다음 getInterpolation() 메서드에서 알고리즘을 직접 구현하고 입력 값을 기반으로 반환 값을 계산할 수 있으며 이 반환 값은 분수입니다.
우리는 LinearInterpolator의 코드를 살펴볼 수 있습니다:
여기에는 입력 값을 직접 반환하는 처리가 없습니다. 즉, 분수 값이 입력 값과 같습니다. 등속운동이다. Interpolator가 구현되는 방법! 사실, 이는 몇 가지 수학적 사항을 포함하는 다양한 알고리즘에 지나지 않습니다. 이제 수학의 중요성을 깨달았으니 BounceInterpolator의 소스 코드는 다음과 같습니다.
여기서는 알고리즘에 대해 묻지 마세요. 나도 모르겠습니다. 이해하기 쉬운 것을 찾아보겠습니다. AccelerateDecelerateInterpolator
이 보간기는 먼저 가속한 다음 감속합니다: (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f 알고리즘 이해: 
해결책: 입력의 값 범위에서 [0,1]까지 cos의 값 범위는 [π, 2π]이고 해당 값은 -1과 1이라는 결론을 내릴 수 있습니다. 이 값을 2로 나누고 0.5를 더한 후에도 getInterpolation() 메서드에서 반환된 최종 결과 값은 여전히 [0,1] 범위에 있습니다. 해당 곡선은 다음과 같습니다.
그래서 먼저 가속한 다음 감속하는 과정입니다!
글쎄, 나는 쓰레기이고 더 이상 놀 수 없습니다 ... 
, 위의 모든 내용은 Guo 삼촌의 기사에서 복사되었습니다 ... 조용히하고 싶습니다 ...
2) 사용자 정의 보간기
자, 나중에 걱정하도록 합시다. 먼저 사용자 정의 보간기 예제를 작성해 보겠습니다. 매우 간단합니다. TimeInterpolator 인터페이스를 구현하고 getInterpolation 메소드를 다시 작성하세요
샘플 코드는 다음과 같습니다
private class DecelerateAccelerateInterpolator implements TimeInterpolator {
@Override
public float getInterpolation(float input) {
if (input < 0.5) {
return (float) (Math.sin(input * Math.PI) / 2);
} else {
return 1 - (float) (Math.sin(input * Math.PI) / 2);
}
}
}setInterpolator(new DecelerateAccelerateInterpolator())를 호출하여 설정하세요~ 공간적 제약으로 인해 사진은 올리지 않습니다~
3. ViewPropertyAnimator
3.1 이후 시스템에 추가된 새로운 기능으로 애니메이션 보기 작업을 보다 편리하게 사용할 수 있습니다! 과거에는 TextView를 일반 상태에서 투명 상태로 변경하려면 다음과 같이 작성했을 것입니다.
ObjectAnimator animator = ObjectAnimator.ofFloat(textview, "alpha", 0f); animator.start();
ViewPropertyAnimator를 사용하여 동일한 효과를 얻는 것이 더 쉽습니다.
textview.animate().alpha(0f);
는 지속적인 사용도 지원합니다. 여러 애니메이션 결합, 지속 시간 설정, 보간기 설정 등~
textview.animate().x(500).y(500).setDuration(5000) .setInterpolator(new BounceInterpolator());
사용법은 매우 간단합니다. 사용 시 문서를 확인하세요~ 그리고 주의해야 할 몇 가지 세부 사항이 아래에 있습니다!
- ViewPropertyAnimator의 전체 기능은 View 클래스의 새로운 animate() 메서드를 기반으로 합니다. 이 메서드는 ViewPropertyAnimator의 인스턴스를 생성하고 반환하며 모든 후속 메서드가 호출됩니다. 모든 속성 설정은 이 인스턴스를 통해 수행됩니다.
- ViewPropertyAnimator를 사용하여 애니메이션을 정의하면 애니메이션이 자동으로 시작됩니다. 그리고 이 메커니즘은 새로운 방법을 계속 추가하는 한 결합된 애니메이션에도 효과적입니다. 그러면 ViewPropertyAnimator에 설정된 모든 메소드가 실행된 후 애니메이션이 즉시 실행되지 않습니다. 애니메이션이 자동으로 시작됩니다. 물론, 이 기본 메커니즘을 사용하지 않으려면 명시적으로 start() 메서드를 호출하여 애니메이션을 시작할 수도 있습니다.
- ViewPropertyAnimator의 모든 인터페이스는 연결된 구문을 사용하여 설계되었으며 각 메서드의 반환 값은 다음과 같습니다. 이는 자체 인스턴스이므로 한 메소드를 호출한 후 연속해서 다른 메소드를 직접 호출할 수 있습니다. 기능은 모두 직렬로 연결되어 있으며 단 한 줄의 코드로 복잡한 애니메이션 기능을 완료할 수도 있습니다.
4. 이 섹션의 샘플 코드를 다운로드하세요
AnimatorDemo3.zip
Github에서 많은 애니메이션 효과가 있는 애니메이션 컬렉션 프로젝트를 찾았습니다. 주소는
BaseAnimation Animation Collection
입니다. 애니메이션이 어떻게 구현되는지 다양하게 공부해보세요~
이 섹션의 요약
글쎄요, 이번 섹션에서는 Evaluator, Interpolator, ViewPropertyAnimator로 모두의 지식이 넓어졌습니다~ 이 부분도 안드로이드 기본 입문도 입니다 이것이 이 장의 마지막 섹션입니다. 이 장의 내용을 마스터했다면 사용자 정의 컨트롤을 배우십시오. 또는 다른 사람들이 작성한 사용자 정의 컨트롤을 보면 더 이상 어디서부터 시작해야 할지 혼란스러워하지 않고 많은 새로운 얼굴을 만날 수 있습니다!
글을 작성해 주신 Guo Shen에게 감사드립니다. 속성 애니메이션 부분의 대부분은 Guo Shen에서 직접 전송되었습니다.
헤헤~ 이 섹션은 여기까지입니다. 감사합니다~
PS: 시뮬레이터를 변경한 이유 다음 다이어그램은 N5가 자랑하는 모습입니다...
