美文网首页
android 支付动画效果

android 支付动画效果

作者: 一年很短 | 来源:发表于2018-11-06 16:15 被阅读0次

    最近研究了一些动画效果 这里就分享给大家吧 gif效果不太好 因为压缩了一下 凑合看看 哈哈

    20181106164205.gif
    1.布局中有两个自定义类(外围整体 用相对布局就能看到效果)
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <com.simple.m.simpleandroid.MySquare
        android:id="@+id/sqareProcess"
        android:layout_width="150dip"
        android:layout_marginTop="100dp"
        android:layout_height="100dip"
        android:layout_centerHorizontal="true"
        app:currentPogress="0"
        app:progressColor="#c1d1dd"
        app:strokeColor="@color/lande"
        app:strokeWith="2dip"
        app:textColor="@color/lande"
        app:textSize="15sp" />
    <com.simple.m.simpleandroid.Yuan
        android:layout_below="@+id/sqareProcess"
        android:id="@+id/yuan"
        android:visibility="gone"
    
        android:layout_width="50dip"
    
        android:layout_height="50dip"
        android:layout_centerHorizontal="true"
      />
    
    2.画线类
    public class MySquare extends View {
    
    private static final float PER_LINE_MAX_Top = 40;
    private static final float PER_LINE_MAX_Rit = 20;
    
    
    private Context mContext;
    private Paint paint;
    private Paint processPaint;
    private Paint textPaint;
    private Canvas canvas;
    
    private int currentPogress;
    private int strokeColor = Color.BLACK;
    private float strokeWith = 2.0f;
    private int progressColor = Color.RED;
    private int textColor = Color.BLUE;
    private float textSize = 10.0f;
    
    public MySquare(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        initValue(attrs);
    }
    
    
    private void initValue(AttributeSet attrs) {
        TypedArray typedArray = mContext.obtainStyledAttributes(attrs, R.styleable.SquareProcessView);
        currentPogress = typedArray.getInteger(R.styleable.SquareProcessView_currentPogress, 0);
        strokeColor = typedArray.getColor(R.styleable.SquareProcessView_strokeColor, ContextCompat.getColor(mContext, R.color.colorPrimary));
        strokeWith = typedArray.getDimension(R.styleable.SquareProcessView_strokeWith, strokeWith);
        progressColor = typedArray.getColor(R.styleable.SquareProcessView_progressColor, ContextCompat.getColor(mContext, R.color.colorAccent));
        textColor = typedArray.getColor(R.styleable.SquareProcessView_textColor, ContextCompat.getColor(mContext, R.color.colorAccent));
        textSize = typedArray.getDimension(R.styleable.SquareProcessView_textSize, textSize);
        initPaints();
    }
    
    private void initPaints() {
        paint = new Paint();
        paint.setColor(strokeColor);
        paint.setStrokeWidth(strokeWith);
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.STROKE);
        initProcessPaint();
        initTextPaint();
    }
    
    private void initProcessPaint() {
        processPaint = new Paint();
        processPaint.setColor(progressColor);
        processPaint.setStrokeWidth(strokeWith);
        processPaint.setAntiAlias(true);
        processPaint.setStyle(Paint.Style.STROKE);
    }
    
    private void initTextPaint() {
        textPaint = new Paint();
        textPaint.setColor(textColor);
        textPaint.setAntiAlias(true);
        textPaint.setStyle(Paint.Style.STROKE);
        textPaint.setTextSize(textSize);
    
    }
    
    public void setCurrentPogress(int currentPogress) {
        this.currentPogress = currentPogress;
        invalidate();
    }
    
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        this.canvas = canvas;
        /*画图*/
        drawSquare();
        /*画圆*/
        drawrec();
    
            /*画线*/
        drawProcessSquare(currentPogress);
    
    }
    
    private void drawrec() {
        Paint mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStrokeWidth(strokeWith);
    
        mPaint.setColor(Color.rgb(79,80,101));
        canvas.drawCircle(canvas.getWidth() / 2, 10, 10, mPaint);
    }
    
    /**
     * 画线
     */
    private void drawSquare() {
        drawRightLine();
    
    }
    
    
    private void drawRightLine() {
        Path path = new Path();
        /*把坐标移动到右上角*/
        path.moveTo(canvas.getWidth() / 2, 20);
        path.lineTo(canvas.getWidth() / 2, canvas.getHeight()-20);
        canvas.drawPath(path, paint);
    }
    
    
    /**
     * 画进度
     */
    private void drawProcessSquare(int progress) {
    
        float rightProcess = 0;
    
        rightProcess = progress ;
    
        drawProgressRightLine(rightProcess);
    
    }
    
    
    private void drawProgressRightLine(float progress) {
        Path path = new Path();
        /*把坐标移动到右上角*/
        path.moveTo(canvas.getWidth() / 2, 20);
        path.lineTo(canvas.getWidth() / 2, canvas.getHeight() / PER_LINE_MAX_Rit * progress);
        canvas.drawPath(path, processPaint);
    }
    
    
    }
    
    3.画圆类
    public class Yuan extends View {
    
    
    /**
     * view的宽度
     */
    private int width;
    /**
     * view的高度
     */
    private int height;
    /**
     * 圆角半径
     */
    private int circleAngle;
    /**
     * 默认两圆圆心之间的距离=需要移动的距离
     */
    private int default_two_circle_distance;
    /**
     * 两圆圆心之间的距离
     */
    private int two_circle_distance;
    /**
     * 背景颜色
     */
    private int bg_color = 0xffbc7d53;
    /**
     * 按钮文字字符串
     */
    private String buttonString = "确认完成";
    /**
     * 动画执行时间
     */
    private int duration = 1000;
    /**
     * view向上移动距离
     */
    private int move_distance = 300;
    
    /**
     * 圆角矩形画笔
     */
    private Paint paint;
    /**
     * 文字画笔
     */
    private Paint textPaint;
    /**
     * 对勾(√)画笔
     */
    private Paint okPaint;
    /**
     * 文字绘制所在矩形
     */
    private Rect textRect = new Rect();
    
    /**
     * 动画集
     */
    private AnimatorSet animatorSet = new AnimatorSet();
    
    
    /**
     * 绘制对勾(√)的动画
     */
    private ValueAnimator animator_draw_ok;
    
    /**
     * 是否开始绘制对勾
     */
    private boolean startDrawOk = false;
    
    
    /**
     * 根据view的大小设置成矩形
     */
    private RectF rectf = new RectF();
    
    /**
     * 路径--用来获取对勾的路径
     */
    private Path path = new Path();
    /**
     * 取路径的长度
     */
    private PathMeasure pathMeasure;
    /**
     * 对路径处理实现绘制动画效果
     */
    private PathEffect effect;
    private Canvas canvas;
    
    
    private float strokeWith = 2.0f;
    
    
    public Yuan(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initPaint();
    }
    
    
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        this.canvas = canvas;
    
        /*画圆*/
        drawrec();
        canvas.drawPath(path, okPaint);
    
    
    }
    
    private void drawrec() {
        Paint mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStrokeWidth(strokeWith);
    
        mPaint.setColor(Color.rgb(20, 164, 101));
        canvas.drawCircle(canvas.getWidth() / 2, 50, 50, mPaint);
    }
    
    
    /**
     * 初始化所有动画
     */
    private void initAnimation() {
    
        set_draw_ok_animation();
    
        animatorSet
                .play(animator_draw_ok);
    
    
    }
    
    
    /**
     * 绘制对勾的动画
     */
    private void set_draw_ok_animation() {
        animator_draw_ok = ValueAnimator.ofFloat(1, 0);
        animator_draw_ok.setDuration(duration);
        animator_draw_ok.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                startDrawOk = true;
                float value = (Float) animation.getAnimatedValue();
    
                effect = new DashPathEffect(new float[]{pathMeasure.getLength(), pathMeasure.getLength()}, value * pathMeasure.getLength());
                okPaint.setPathEffect(effect);
                invalidate();
            }
        });
    }
    
    private void initPaint() {
    
    
        okPaint = new Paint();
        okPaint.setStrokeWidth(10);
        okPaint.setStyle(Paint.Style.STROKE);
        okPaint.setAntiAlias(true);
        okPaint.setColor(Color.WHITE);
    }
    
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
    
        width = w;
        height = h;
    
        default_two_circle_distance = (w - h) / 2;
    
        initOk();
        initAnimation();
        start();
    
    }
    
    
    /**
     * 绘制对勾
     */
    private void initOk() {
        //对勾的路径
        path.moveTo(default_two_circle_distance + height / 9 * 3, height / 9 * 3);
        path.lineTo(default_two_circle_distance + height / 2, height / 8 * 4);
        path.lineTo(default_two_circle_distance + height / 4 * 3, height / 4);
    
        pathMeasure = new PathMeasure(path, true);
    
    }
    
    /**
     * 启动动画
     */
    public void start() {
        animatorSet.start();
    }
    
    
     }
    
    最后附上我们的activity中的代码 大功告成
     public class Main2Activity extends AppCompatActivity {
     private MySquare squareProgressView;
     private MyHandnler myHandnler = new MyHandnler(this);
     private int currentProcess;
     private int currentProcessGou;
     public WeakReference<Main2Activity> weakReference;
     private Yuan yuan;
     Animation animation;
     Button button;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        squareProgressView = (MySquare) findViewById(R.id.sqareProcess);
    
        animation = AnimationUtils.loadAnimation(this, R.anim.anim_small);
    
        yuan = (Yuan) findViewById(R.id.yuan);
        try {
            sleep(2000);
    
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        button= findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                myHandnler.sendEmptyMessage(1);
            }
        });
    }
    
    class MyHandnler extends Handler {
    
    
        public MyHandnler(Main2Activity mainActivity) {
            weakReference = new WeakReference<>(mainActivity);
        }
    
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            /*圈线*/
            if (msg.what == 1) {
                if (weakReference.get().currentProcess <= 100) {
                    weakReference.get().currentProcess++;
                    weakReference.get().squareProgressView.setCurrentPogress(weakReference.get().currentProcess);
                    sendEmptyMessageDelayed(1, 0);
                }
                if (weakReference.get().currentProcess == 40) {
                    yuan.setVisibility(View.VISIBLE);
                    yuan.startAnimation(animation);
                    sendEmptyMessageDelayed(3, 0);
                }
    
    
            }
        }
    }
    
    @Override
    protected void onDestroy() {
        super.onDestroy();
        myHandnler.removeCallbacksAndMessages(null);
    }
     }
    

    相关文章

      网友评论

          本文标题:android 支付动画效果

          本文链接:https://www.haomeiwen.com/subject/dsuuxqtx.html