Создание анимации сканирования с использованием студии Android
У меня возникли проблемы с созданием анимации сканирования на моем приложении для Android. Например, я столкнулся с этим приложением Отсканированный сканер отпечатков пальцев, который имеет анимацию сканирования, и я хотел бы реализовать ее в своем приложении для Android. Я попытался реализовать то же самое в своем приложении для Android, но напрасно. Это мой фрагмент кода для Android.
Анимация .Java Activity
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
Содержит изображение сканера, определенное изображением, как показано ниже.
<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
Ответы
Ответ 1
Edited
Эта проблема может быть решена с помощью очень небольшого кода.
Сначала измените код анимации 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;
}
});
И таким образом вы получите этот результат:
![введите описание изображения здесь]()
Я использовал 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)
Ответ 2
Вместо 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;
}
Ответ 3
Попробуйте следующее:
@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();
}
}
Ответ 4
Для анимации на android я советую вам использовать Animation Drawable, ее просто реализовать: https://developer.android.com/reference/android/graphics/drawable/AnimationDrawable.html
Первые шаги для отображения анимации (пример Gif), мы разделили его на pngs (в Интернете по примеру я использую 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();
Ответ 5
измените анимацию на
<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);
}
});