English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Al usar la aplicación Monedero, descubrí que la animación de inicio es bastante divertida, así que la imité y la implementé.
Efecto gráfico en gif:
animation.gif
Enfoque de implementación:
Al observar con atención, se puede ver que la ejecución del animación se divide en dos etapas:
La primera etapa es la caída de las monedas.
La segunda etapa es el rebote de la billetera.
El archivo xml de diseño es el siguiente:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<ImageView
android:id=""+id/coin_iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@mipmap"/coin"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="70dp"
android:layout_marginLeft="70dp"
android:src="@mipmap"/version"/>
<ImageView
android:id=""+id/wallet_iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@mipmap"/wallet"/>
<Button
android:id=""+id/start_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|bottom"
android:layout_marginBottom="10dp"
android:text="start"/>
</FrameLayout>
Caída de la moneda:
En el proceso de caída de la moneda se ejecutan dos animaciones, el desplazamiento y la rotación.
El movimiento de posición de la animación utiliza animaciones de interpolación, el archivo xml es el siguiente:
<?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:fromYDelta=""-50%p" android:interpolator="@android:anim"/accelerate_interpolator" android:toYDelta="0%"/>
La animación de rotación utiliza la sobrescripción de Animation y la clase android.hardware.Camera para implementar.
public class ThreeDRotateAnimation extends Animation {
int centerX, centerY;
Camera camera = new Camera();
@Override
public void initialize(int width, int height, int parentWidth, int parentHeight) {}}
super.initialize(width, height, parentWidth, parentHeight);
// coordenadas del punto central
centerX = width / 2;
centerY = height / 2;
setDuration(500);
setInterpolator(new LinearInterpolator());
}
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
final Matrix matrix = t.getMatrix();
camera.save();
// girar alrededor del eje y
camera.rotateY(360 * interpolatedTime);
camera.getMatrix(matrix);
// establecer el punto de centro de inversión
matrix.preTranslate(-centerX, -centerY);
matrix.postTranslate(centerX, centerY);
camera.restore();
}
}
Aquí explico brevemente los métodos preTranslate y postTranslate dentro de animation, preTranslate se refiere a la transición antes de rotateY, y postTranslate se refiere a la transición después de rotateY, atención, sus parámetros son la distancia de transición, no el punto de destino de la transición!
Dado que la rotación se realiza con el centro (0,0), para alinear el centro de la moneda con (0,0), se debe hacer preTranslate(-centerX, -centerY), una vez completada la rotación de rotateY, llamar a postTranslate(centerX, centerY), luego mover la imagen de vuelta, de esta manera, el efecto de animación que veremos es que la moneda gira constantemente desde el centro.
Finalmente, ejecutar ambas animaciones simultáneamente para lograr el efecto de caída y rotación.
private void startCoin() {
// caída
Animation animationTranslate = AnimationUtils.loadAnimation(this, R.anim.anim_top_in);
// girar
ThreeDRotateAnimation animation3D = new ThreeDRotateAnimation();
animation3D.setRepeatCount(10);
AnimationSet animationSet = new AnimationSet(true);
animationSet.setDuration(800);
animationSet.addAnimation(animation3D);
animationSet.addAnimation(animationTranslate);
mCoinIv.startAnimation(animationSet);
｝
Rebote de la billetera:
Mientras se ejecuta la caída de la moneda, se lanza un animador ValueAnimator para determinar el momento del rebote de la billetera.
private void setWallet() {
final ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1);
valueAnimator.setDuration(800);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override public void onAnimationUpdate(ValueAnimator animation) {
float fraction = animation.getAnimatedFraction();
// Al approximadamente caer al borde superior de la billetera, cancelar el animador ValueAnimator y ejecutar el efecto de rebote de la billetera
if (fraction >= 0.75) {
valueAnimator.cancel();
startWallet();
}
}});
valueAnimator.start();
｝
La última acción es el efecto de rebote del billetera, aquí se utiliza ObjectAnimator .
private void startWallet() {
// escala en el eje X
ObjectAnimator objectAnimator1 = ObjectAnimator.ofFloat(mLogoIv, "scaleX", 1,)}} 1.1f, 0.9f, 1);
objectAnimator1.setDuration(600);
// Escala en el eje y
ObjectAnimator objectAnimator2 = ObjectAnimator.ofFloat(mLogoIv, "scaleY", 1, 0.75f, 1.25f, 1);
objectAnimator2.setDuration(600);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.setInterpolator(new LinearInterpolator());
// Ejecutar animaciones de escala en los ejes x, y simultáneamente
animatorSet.playTogether(objectAnimator1, objectAnimator2);
animatorSet.start();}
Este efecto de animación de inicio de monedero simple es más o menos, el único defecto es que al realizar el zoom en el eje y del monedero, se realiza un zoom completo en el eje y. Para mantener el fondo del monedero en su lugar, solo puede rebotar la parte superior del monedero, por ahora no he pensado en una buena solución, el pequeño hermano no es muy talentoso, espero que los grandes maestros me den lecciones. Gracias!
Código fuente completo:
El código fuente completo está enGitHub
Si te parece bien, no olvides star╰(￣▽￣)╮~
Esto es todo el contenido del artículo, espero que sea útil para su aprendizaje y que todos nos apoyen y alentemos el tutorial de grito.
Declaración: El contenido de este artículo se ha obtenido de la red, es propiedad del autor original, el contenido se ha contribuido y subido por los usuarios de Internet de manera autónoma. Este sitio no posee los derechos de propiedad, no ha sido editado por humanos y no asume responsabilidad alguna por ellas. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar, y proporcione evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción.