自定義View——聚焦動畫控制元件
阿新 • • 發佈:2018-12-14
我儘量不打錯別字,用詞準確,不造成閱讀障礙。
這個自定義View是很簡單的一個,效果是在拍攝圖片時的對焦動畫,在自定義SurfaceView中使用這個控制元件就好了。
效果如下:
程式碼:
public class FocusView extends View {
private Paint mLinePaint; //畫筆
private int mBorderWidth = 4; //圓環的寬
private AnimatorSet animSet;
private ObjectAnimator fadeInOut;
private boolean isFocusing = false;
public FocusView(Context context) {
super(context);
init();
}
public FocusView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public FocusView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
//初始化
private void init() {
mLinePaint = new Paint();
mLinePaint.setAntiAlias(true);
mLinePaint.setStyle(Paint.Style.STROKE);
mLinePaint.setColor(Color.parseColor("#45ffffff"));
mLinePaint.setStrokeWidth(mBorderWidth);
this.setAlpha(0f); //初始化設定透明
}
private void setMainColor() {
mLinePaint. setColor(getResources().getColor(R.color.colorPrimaryDark));
postInvalidate();
}
private void reSet() {
mLinePaint.setColor(Color.parseColor("#52ce90"));
postInvalidate();
}
@Override
protected void onDraw(Canvas canvas) {
//其實就是畫個圓
canvas.drawCircle(getWidth() / 2, getHeight() / 2, getHeight() / 2 - mBorderWidth / 2, mLinePaint);
}
//開始動畫,這個方法暴露給外界呼叫
public void beginFocus() {
isFocusing = true;
if (animSet == null) {
//設定X軸動畫為1倍-->1.3倍-->1倍,也可以使用具體的縮放動畫類
ObjectAnimator scaleX = ObjectAnimator.ofFloat(this, "scaleX", 1f, 1.3f, 1f);
//設定Y軸動畫為1倍-->1.3倍-->1倍,也可以使用具體的縮放動畫類
ObjectAnimator scaleY = ObjectAnimator.ofFloat(this, "scaleY", 1f, 1.3f, 1f);
animSet = new AnimatorSet();
animSet.play(scaleX).with(scaleY); //設定X軸和Y軸同時執行
animSet.setInterpolator(new LinearInterpolator()); //線性插值器,即勻速執行
animSet.setDuration(1000); //施行時間1秒
animSet.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
FocusView.this.setAlpha(1f); //在動畫開始時顯示view
}
@Override
public void onAnimationRepeat(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
setMainColor();
if(fadeInOut == null) {
//在動畫結束後啟用另一個動畫,透明度變化
fadeInOut = ObjectAnimator.ofFloat(FocusView.this, "alpha", 1f, 0f);
fadeInOut.setDuration(500);
fadeInOut.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
reSet();
isFocusing = false;
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
}
fadeInOut.start();
}
@Override
public void onAnimationCancel(Animator animation) {
}
});
} else {
if(animSet.isRunning()) {
animSet.cancel();
}
if(fadeInOut != null && fadeInOut.isRunning()) {
fadeInOut.cancel();
}
}
animSet.start();
}
public boolean isFocusing() {
return isFocusing;
}
}
大體上是這個思路,具體的圓環樣式和動畫實現方法可以根據具體的情況更改。