使用android studio创建扫描动画

时间:2016-11-06 07:08:45

标签: android android-studio animation

我在Android应用程序上创建扫描动画时遇到了麻烦。例如,我遇到了这个应用程序' Fingerprint love scanner prank'它有扫描动画,我想在我的Android应用程序上实现相同。我试图在我的Android应用程序上实现相同但是徒劳无功。这是我的android代码片段。

Animation.Java活动

          scan.setOnTouchListener(new View.OnTouchListener() {
                @Override
                public boolean onTouch(View view, MotionEvent motionEvent) {


                    final CountDownTimer start = new CountDownTimer(4000, 1000) {

                        public void onTick(long millisUntilFinished) {
                            scanner.setVisibility(View.VISIBLE);
                            anim1 = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.progress);
                            scanner.startAnimation(anim1);


                        }

                        public void onFinish() {

                            scanner.setVisibility(View.INVISIBLE);

                        }
                    }.start();
                    return false;
                }


            });

Animation.xml

包含imageView定义的扫描仪图像,如下所示

<LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="40dp"
            android:id="@+id/scan"
            android:background="@drawable/bgscanner">

            <ImageView
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:src="@drawable/scanner"
                android:id="@+id/scanner1"
                android:layout_marginTop="20dp"
                android:visibility="invisible"
                />
        </LinearLayout>

我的动画可绘制

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator"
    android:fillAfter="true">

    <translate
        android:fromYDelta="0%p"
        android:toYDelta="75%p"
        android:duration="800"
        />
</set>

我的大问题是,在触摸事件中,动画不会执行。也就是说,图像条不会沿垂直轴振荡。我请求stackoverflow提供任何帮助

5 个答案:

答案 0 :(得分:12)

<强>被修改

使用非常小的代码可以解决这个问题。

首先,将XML动画代码更改为:

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:fillAfter="false">

    <translate
        android:fromYDelta="0%p"
        android:toYDelta="100%p"
        android:duration="1000"
        android:repeatCount="infinite"
        android:repeatMode="restart"
        />
</set>

您的布局应该是这样的:

<LinearLayout
        android:id="@+id/image"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@mipmap/ic_launcher">

        <View
            android:id="@+id/bar"
            android:layout_width="200dp"
            android:layout_height="6dp"
            android:visibility="gone"
            android:background="@android:color/black"
            android:src="@mipmap/ic_launcher"/>
    </LinearLayout>

在您的活动中,代码可以是这样的:

LinearLayout imageView = (LinearLayout) findViewById(R.id.image);
        final View bar = findViewById(R.id.bar);
        final Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.anim);
        animation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {}

            @Override
            public void onAnimationEnd(Animation animation) {
                bar.setVisibility(View.GONE);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {}
        });

        imageView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                bar.setVisibility(View.VISIBLE);
                bar.startAnimation(animation);
                return false;
            }
        });

这样你就会得到这个结果:

enter image description here

我使用View而不是ImageView来制作扫描条,但您可以根据需要更改代码。

我希望它有所帮助!

编辑2:

如果您希望仅在按下图像时才能进行动画,请将代码更改为:

imageView.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View view, MotionEvent motionEvent) {
            if(motionEvent.getAction() == MotionEvent.ACTION_DOWN){
                bar.setVisibility(View.VISIBLE);
                bar.startAnimation(animation);
            } else if(motionEvent.getAction() == MotionEvent.ACTION_UP){
                bar.setVisibility(View.GONE);
                animation.cancel();
            }

            return false;
        }
    });

按下图像时触发动画(MotionEvent.ACTION_DOWN),并在图像释放时停止动画(MotionEvent.ACTION_UP)

答案 1 :(得分:6)

而不是countDownTimer使用onTouch列表器中动画的值动​​画。

scan.setOnTouchListener(new View.OnTouchListener() {
  @Override
  public boolean onTouch(View view, MotionEvent motionEvent) {
   if(motionEvent.getAction==MotionEvent.ACTION_DOWN){ 
     ValueAnimator valueAnimator=ValueAnimator.ofFloat(0,75);
     valueAnimator.setDuration(4000);
     valueAnimator.setInterpolator(new DecelerateInterpolator());
     valueAnimator.addListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animation) {
           scanner.setVisibilty(View.VISIBLE);
        }
        @Override
        public void onAnimationEnd(Animator animation) {
            scanner.setVisibilty(View.INVISIBLE);
        }
        @Override
        public void onAnimationCancel(Animator animation) {
             scanner.setVisibilty(View.INVISIBLE);
        }
        @Override
        public void onAnimationRepeat(Animator animation) {
         }
        });
     valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener()      {
           @Override
           public void onAnimationUpdate(ValueAnimator animation) {
              float translate= (float) animation.getAnimatedValue();
              scanner.setTranslationY(translate);//translate scanner in Y direction
           }
       });
    valueAnimator.start();
   }
 return true;
}

答案 2 :(得分:4)

试试这个:

@Override
public boolean onTouch(View view, MotionEvent motionEvent) {

      final CountDownTimer start = new CountDownTimer(4000, 1000) {

     anim1 = AnimationUtils.loadAnimation(getApplicationContext(),
            R.anim.progress);

    // set animation listener
    anim1.setAnimationListener(this);

    // button click event
    scan.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onTick(View v) {
            scanner.setVisibility(View.VISIBLE);

            // start the animation
            scanner.startAnimation(anim1);
        }            
    });

}
@Override
public void onAnimationEnd(Animation animation) {
    // Take any action after completing the animation

    // check for fade in animation
    if (animation == anim1) {
        Toast.makeText(getApplicationContext(), "Animation Stopped",
                Toast.LENGTH_SHORT).show();
    }

}

答案 3 :(得分:4)

对于android上的动画,我建议你使用Animation Drawable,它很容易实现:https://developer.android.com/reference/android/graphics/drawable/AnimationDrawable.html 显示动画的第一步(按示例为Gif),我们将其拆分为png(在线示例我使用http://ezgif.com/,然后我在xml drawable上应用初始化:

<!-- Animation frames are wheel0.png through wheel5.png
     files inside the res/drawable/ folder -->
 <animation-list android:id="@+id/selected" android:oneshot="false">
    <item android:drawable="@drawable/wheel0" android:duration="50" />
    <item android:drawable="@drawable/wheel1" android:duration="50" />
    <item android:drawable="@drawable/wheel2" android:duration="50" />
    <item android:drawable="@drawable/wheel3" android:duration="50" />
    <item android:drawable="@drawable/wheel4" android:duration="50" />
    <item android:drawable="@drawable/wheel5" android:duration="50" />
 </animation-list>

最后我将它加载到我定义的类上:

// Load the ImageView that will host the animation and
 // set its background to our AnimationDrawable XML resource.
 ImageView img = (ImageView)findViewById(R.id.spinning_wheel_image);
 img.setBackgroundResource(R.drawable.spin_animation);

 // Get the background, which has been compiled to an AnimationDrawable object.
 AnimationDrawable frameAnimation = (AnimationDrawable) img.getBackground();

 // Start the animation (looped playback by default).
 frameAnimation.start();

答案 4 :(得分:3)

将动画更改为此

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator"
    duration="4000"
    android:repeatMode="reverse"
    android:fillAfter="false">

    <translate
        android:fromYDelta="0%p"
        android:toYDelta="75%p"
        android:duration="800"/>
</set>

和你的代码

scan.setOnTouchListener(new View.OnTouchListener() {
                @Override
                public boolean onTouch(View view, MotionEvent motionEvent) {

                            scanner.setVisibility(View.VISIBLE);
                            anim1 = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.progress);
                            anim1.setAnimationListener(new Animation.AnimationListener() {
                                @Override
                                public void onAnimationStart(Animation animation) {

                                }

                                @Override
                                public void onAnimationEnd(Animation animation) {
                                scanner.setVisibility((View.INVISIBLE)
                                }

                                @Override
                                public void onAnimationRepeat(Animation animation) {

                                }
                            });
                            scanner.startAnimation(anim1);

                 }
            });