【问题标题】:how to make star shape and animate it in android?如何在android中制作星形并为其设置动画?
【发布时间】:2017-09-26 03:41:36
【问题描述】:

我想为我的项目制作一个星形。 我搜索了一下,现在我终于可以使用画布制作星形了。

但接下来我想要的对我来说真的很难。这真是一场噩梦。 我尝试并搜索,但对我没有任何帮助。

我想要的是星星必须由没有背景颜色的线条组成。 只有一条线..穿过这条线..

然后一行被表达并淡出,下一行被创建并再次淡出,然后该行被创建然后再次淡出,我希望它是永久的这个动作。直到我将此活动的屏幕留给另一个。

【问题讨论】:

    标签: android android-layout android-animation android-graphics


    【解决方案1】:

    这段代码取自我一段时间前从事的一个项目。我认为它可以满足您的需求。

    首先,我不知道您是如何为星星创建线条的。我只是使用矢量绘图来创建星线(有关如何使用 VectorDrawables 的更多详细信息,请查看this 帖子)。我应该警告你,我赶时间,所以它不会很漂亮

    警告: 这篇文章会很长

    star1.xml

    <vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="48dp"
        android:height="48dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">    
        <path android:pathData="M20,24L12,0"
            android:strokeColor="@color/starColor"
            android:strokeWidth="0.1"/>    
    </vector>
    

    star2.xml

    <vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="48dp"
        android:height="48dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">    
        <path android:pathData="M4,24L12,0"
            android:strokeColor="@color/starColor"
            android:strokeWidth="0.1"/>    
    </vector>
    

    star3.xml

    <vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="48dp"
        android:height="48dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">    
        <path android:pathData="M0,8L24,8"
            android:strokeColor="@color/starColor"
            android:strokeWidth="0.1"/>    
    </vector>
    

    star4.xml

    <vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="48dp"
        android:height="48dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
        <path android:pathData="M4,24L24,8"
            android:strokeColor="@color/starColor"
            android:strokeWidth="0.1"/>
    </vector>
    

    star5.xml

    <vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="48dp"
        android:height="48dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
        <path android:pathData="M20,24L0,8"
            android:strokeColor="@color/starColor"
            android:strokeWidth="0.1"/>
    </vector>
    

    好的。现在您已经拥有了所有必需的可绘制对象,让我们跳转到 Activity XML 并创建布局。这里只是基本的东西。我将使用 5 个ImageViews 来保存不同的星线(这样可以方便地制作动画,但可能会导致我们稍后会讨论的性能问题)。我将使用ConstraintLayout 作为根视图。

    activity_test.xml

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <ImageView
            android:id="@+id/image1"
            android:layout_width="200dp"
            android:layout_height="200dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            android:alpha="0"/>
    
        <ImageView
            android:id="@+id/image2"
            android:layout_width="200dp"
            android:layout_height="200dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            android:alpha="0"/>
    
        <ImageView
            android:id="@+id/image3"
            android:layout_width="200dp"
            android:layout_height="200dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            android:alpha="0"/>
    
        <ImageView
            android:id="@+id/image4"
            android:layout_width="200dp"
            android:layout_height="200dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            android:alpha="0"/>
    
        <ImageView
            android:id="@+id/image5"
            android:layout_width="200dp"
            android:layout_height="200dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            android:alpha="0"/>
    
    </android.support.constraint.ConstraintLayout>
    

    您可能已经注意到,我没有使用android:src 属性将任何可绘制对象分配给ImageView。我鼓励你继续尝试这样做。同时,我正在以编程方式添加图像。

    onCreate方法之上声明如下变量

    private ImageView image1, image2, image3, image4, image5;
    private Context context;
    private int i = 1;
    private long duration = 800;
    private Handler animHandler;
    

    animHandler 将负责保持动画的运行。我将使用i 来跟踪要为哪个ImageView 设置动画。顾名思义,duration 字段将保存动画所需的持续时间。

    这是其余的代码。我会尽可能提供 cmets。

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test);
    
        // Initialising the imageview. I'm using SDK 26 so I did not
        // require typecasting.
        image1 = findViewById(R.id.image1);
        image2 = findViewById(R.id.image2);
        image3 = findViewById(R.id.image3);
        image4 = findViewById(R.id.image4);
        image5 = findViewById(R.id.image5);
    
        context = TestActivity.this;
    
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                setupView(); // This method will initialize all IVs 
                             // and add the vector drawable as bitmap
                animHandler = new Handler();
                startAnim();
            }
        }, 200);
    
    }
    

    设置视图

    private void setupView() {
        setVectorDrawable(image1, ContextCompat.getDrawable(context,R.drawable.star1));
        setVectorDrawable(image2, ContextCompat.getDrawable(context,R.drawable.star2));
        setVectorDrawable(image3, ContextCompat.getDrawable(context,R.drawable.star3));
        setVectorDrawable(image4, ContextCompat.getDrawable(context,R.drawable.star4));
        setVectorDrawable(image5, ContextCompat.getDrawable(context,R.drawable.star5));
    }
    

    setVectorDrawable

    private void setVectorDrawable(ImageView imageView, Drawable drawable) {
        Bitmap bitmap = Bitmap.createBitmap(imageView.getWidth(),
                imageView.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
        drawable.draw(canvas);
    
        imageView.setImageBitmap(bitmap);
    }
    

    在这里,我创建了 5 个不同的位图来保存 5 行。这还不是什么大问题。但是对于更大的项目(我不得不一起使用 69 个位图)在内存中有很多位图可能不是一个好习惯。 5 个位图应该可以正常工作。

    开始动画

    private void startAnim() {
        runnable.run();
    }
    

    可运行

    Runnable runnable = new Runnable() {
        @Override
        public void run() {
            switch (i) {
                case 1:
                    animateStarIn(image1);
                    break;
                case 2:
                    animateStarIn(image2);
                    break;
    
                case 3:
                    animateStarIn(image3);
                    break;
                case 4:
                    animateStarIn(image4);
                    break;
    
                case 5:
                    animateStarIn(image5);
                    break;
                case 6:
                    animateStartOut(image1);
                    break;
    
                case 7:
                    animateStartOut(image2);
                    break;
                case 8:
                    animateStartOut(image3);
                    break;
    
                case 9:
                    animateStartOut(image4);
                    break;
                case 10:
                    animateStartOut(image5);
                    break;
            }
            i++;
            if (i == 11) i = 1;
            animHandler.postDelayed(runnable, duration);
        }
    };
    
    private void animateStarIn(ImageView imageView) {
        imageView.animate().alpha(1).setDuration(duration).setInterpolator(new AccelerateInterpolator());
    }
    private void animateStartOut (ImageView imageView) {
        imageView.animate().alpha(0).setDuration(duration).setInterpolator(new DecelerateInterpolator());
    }
    

    简而言之,我正在创建一个可运行对象,它将根据值变量 i 持有的不同来对不同的 ImageViews 进行动画处理。

    让我再次强调一下,我发布了这段代码,来自我一段时间前从事的一个项目。即使它不直接满足您的要求,我也鼓励您尝试并尝试一下以使其正常工作。

    编辑

    此动画通过确保 runnable 重复来工作。要停止动画,请使用

    animHandler.removeCallbacks(runnable);
    

    【讨论】:

    • 哇.. 太不可思议了。这是完美的。但是您说,“这使动画变得很方便,但可能会导致我们稍后会讨论的性能问题”。我会把它放在我的应用程序中。会不会有性能问题?优化有什么比使用它更好的事情吗?例如,创建并附加 GIF。功能很完善,不过最后想问一下性能问题。
    • @Julidi 如果我们谈论的是 5 ImageViews,它不会影响性能。 Android 监视器显示正在使用 7MB(不多)。此外,在示例中,我使用了ImageView 大小作为200dp。如果你要缩小它,比如 75dp,内存使用量下降到 1-2MB。使用path 在画布上绘图在内存方面会更有效,但更耗时。
    • 又该如何阻止呢??
    • 谢谢!!我必须使用这种单例模式或静态类吗?或者你认为更好地使这成为一般客观?我只是认为这是一项活动的长代码。
    【解决方案2】:

    我认为您不会找到完全符合您要求的代码,但您可以采用其他代码并对其进行调整。

    您可以获取在画布上逐行绘制星星的代码(例如,从这里获取:drawing a star),并根据时间管理您正在绘制的星星的哪一行以及您不是哪一行(构建一个管理各个阶段的小型“状态机”。

    您可以在适当的阶段在此视图上使用简单的淡入淡出动画来处理淡入淡出。

    【讨论】:

    • 嗯,这个例子我看过了。
    猜你喜欢
    • 1970-01-01
    • 2011-01-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-08-15
    • 1970-01-01
    • 2014-07-12
    • 1970-01-01
    相关资源
    最近更新 更多