Android:在画布上为单个路径的 alpha 设置动画

Posted

技术标签:

【中文标题】Android:在画布上为单个路径的 alpha 设置动画【英文标题】:Android: animate the alpha of single Path on a canvas 【发布时间】:2011-06-06 22:00:20 【问题描述】:

我想在 android 画布上为单个路径设置动画。

public class MyView extends View 
    private Path paths[];
    protected void onDraw( Canvas canvas ) 
        Paint paint = new Paint();
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth( 8 );
        paint.setColor(Color.BLUE);

        Path path = new Path();
        path.moveTo(75, 11);
        path.quadTo(62, 87, 10, 144);
        canvas.drawPath( path, paint );
        paths[0] = path;

        path.reset();
        path.moveTo(50, 100);
        path.lineTo(150, 200);
        canvas.drawPath( path, paint );
        paths[1] = path;
    

现在我有了路径[],我想分别为每一个设置动画。我希望它像增长一样改变 alpha。一开始只有一个小点,然后长成一条线,重复。

可以吗?

怎么做?

【问题讨论】:

我也有类似的问题***.com/questions/16686861/…请人帮忙... 【参考方案1】:

我会添加一个从 0 到 1 的新浮点数,以保持当前动画百分比并使用它来设置当前 alpha

public class MyView extends View 
     private Path paths[];
     private float mAnimPercentage = 0.0f;

    private static final int clip(int value)  //forces the value to be between 0 and 255
        return Math.max(0, Math.min(255, value));
    
    protected void onDraw( Canvas canvas ) 
        Paint paint = new Paint();
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth( 8 );
        paint.setColor(Color.BLUE);

        Path path = new Path();
        path.moveTo(75, 11);
        path.quadTo(62, 87, 10, 144);
        //edited here
        paint.setAlpha(clip(mAnimPercentage*255*2));
        canvas.drawPath( path, paint );
        paths[0] = path;

        path.reset();
        path.moveTo(50, 100);
        path.lineTo(150, 200);
        //edited here
        paint.setAlpha(clip(-127 + mAnimPercentage*255*2));   //the biggest is the negative value, the latter this path will show, the biggest is the number multiplied by mAnimPercentage, the fastest this path will get completely opaque
        canvas.drawPath( path, paint );
        paths[1] = path;
        mAnimPercentage+= 0.01; //FIXME this is for TEST only, you should update it with an animator
        postInvalidate();
    

【讨论】:

以上是关于Android:在画布上为单个路径的 alpha 设置动画的主要内容,如果未能解决你的问题,请参考以下文章

通过字母在画布上绘制文本,以控制单个字母的alpha,同时与中心对齐

使用画布和 JavaScript 的嵌套动画

Facebook 如何在画布页面上为 iFrame 设置跨域 cookie?

在android中向画布添加点而不刷新整个画布

android 画布区域,android:canvas绘制一个透明矩形并填充其余区域

HTML5 画布 - 当 alpha < 1 时,相同的 RGBA 样式会产生不同的颜色