ParticleSmasher es una biblioteca de Android que nos permite aplicar fácilmente efectos de partículas en nuestras vistas en nuestra aplicación de Android. Podemos usar esta función en muchas aplicaciones, como la aplicación en la que destruimos una interfaz de usuario en particular después de completar la tarea o cuando eliminamos una determinada expediente. A continuación se proporciona un GIF de muestra para tener una idea de lo que vamos a hacer en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Java .
Implementación paso a paso
Paso 1: Crear un nuevo proyecto
Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.
Paso 2: antes de ir a la sección de codificación, primero haga una tarea previa
Vaya a aplicación -> res -> valores -> archivo colors.xml y configure los colores para la aplicación.
XML
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#0F9D58</color> <color name="colorPrimaryDark">#0F9D58</color> <color name="colorAccent">#05af9b</color> </resources>
Vaya a la sección Gradle Scripts -> build.gradle (Módulo: aplicación) e importe las siguientes dependencias y haga clic en » sincronizar ahora » en la ventana emergente anterior.
implementación ‘com.ifadai:particlesmasher:1.0.1’
Paso 3: Diseño de la interfaz de usuario
En el archivo activity_main.xml, elimine la Vista de texto predeterminada y cambie el diseño a Diseño relativo y dentro de él agregue un LinearLayout vertical y dentro de LinearLayout agregue 6 botones con diferentes ID, texto y colores. A continuación se muestra el código para el archivo activity_main.xml .
XML
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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" tools:context=".MainActivity"> <!-- simple vertical linear layout --> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <!-- simple buttons with different text ,color and id's --> <Button android:id="@+id/button1" android:layout_width="match_parent" android:layout_height="64dp" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:backgroundTint="#F44336" android:text="Effect 1" android:textColor="#ffff" /> <Button android:id="@+id/button2" android:layout_width="match_parent" android:layout_height="64dp" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:backgroundTint="#9C27B0" android:text="Effect 2" android:textColor="#ffff" /> <Button android:id="@+id/button3" android:layout_width="match_parent" android:layout_height="64dp" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:backgroundTint="#3F51B5" android:text="Effect 3" android:textColor="#ffff" /> <Button android:id="@+id/button4" android:layout_width="match_parent" android:layout_height="64dp" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:backgroundTint="#03A9F4" android:text="Effect 4" android:textColor="#ffff" /> <Button android:id="@+id/button5" android:layout_width="match_parent" android:layout_height="64dp" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:backgroundTint="#009688" android:text="Effect 5" android:textColor="#ffff" /> <Button android:id="@+id/button6" android:layout_width="match_parent" android:layout_height="64dp" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:backgroundTint="#FFEB3B" android:text="Effect 6" android:textColor="#ffff" /> </LinearLayout> </RelativeLayout>
Paso 4: Parte de codificación
Abra el archivo MainActivity.java y dentro del método onCreate() cree e inicialice el objeto ParticleSmasher y haga lo mismo para 6 botones como se muestra a continuación.
Java
// creating ParticleSmasher object ParticleSmasher smasher = new ParticleSmasher(MainActivity.this); Button btn1=(Button) findViewById(R.id.button1); Button btn2=(Button) findViewById(R.id.button2); Button btn3=(Button) findViewById(R.id.button3); Button btn4=(Button) findViewById(R.id.button4); Button btn5=(Button) findViewById(R.id.button5); Button btn6=(Button) findViewById(R.id.button6);
A continuación se muestra el código que se usa para romper la vista (también tiene OnAnimatorListener cuando la animación comienza y finaliza , simplemente mostramos un mensaje de brindis dentro de los métodos), llamaremos a esta vista dentro de los onClick Listeners de diferentes botones
Java
// add the code inside all buttons onclick
smasher.with(view)
.setStyle(SmashAnimator.STYLE_DROP) // Set animation style
.setDuration(1500) // Set animation time
.setStartDelay(300) // Set the delay before the animation
.setHorizontalMultiple(2) // Set the amplitude of lateral movement, the default is 3
.setVerticalMultiple(2) // Set the vertical movement amplitude, the default is 4
.addAnimatorListener(new SmashAnimator.OnAnimatorListener() {
@Override
public void onAnimatorStart() {
super.onAnimatorStart();
// Callback, the animation starts
Toast.makeText(MainActivity.this, "onAnimatorStart "+view, Toast.LENGTH_SHORT).show();
}
@Override
public void onAnimatorEnd() {
super.onAnimatorEnd();
// Callback, the animation ends
Toast.makeText(MainActivity.this, "onAnimatorEnd "+view, Toast.LENGTH_SHORT).show();
}
}).start();
A continuación, cree un OnClickListener individual para los 6 botones, y dentro del método onClick (View view) agregue el código anterior con diferentes efectos.
Java
// click listener for btn1
btn1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
smasher.with(view)
.setStyle(SmashAnimator.STYLE_DROP) // Set animation style
.setDuration(1500) // Set animation time
.setStartDelay(300) // Set the delay before the animation
.setHorizontalMultiple(2) // Set the amplitude of lateral movement, the default is 3
.setVerticalMultiple(2) // Set the vertical movement amplitude, the default is 4
.addAnimatorListener(new SmashAnimator.OnAnimatorListener() {
@Override
public void onAnimatorStart() {
super.onAnimatorStart();
// Callback, the animation starts
Toast.makeText(MainActivity.this, "onAnimatorStart "+view, Toast.LENGTH_SHORT).show();
}
@Override
public void onAnimatorEnd() {
super.onAnimatorEnd();
// Callback, the animation ends
Toast.makeText(MainActivity.this, "onAnimatorEnd "+view, Toast.LENGTH_SHORT).show();
}
}).start();
}
});
// click listener for btn2
btn2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
smasher.with(view)
.setStyle(SmashAnimator.STYLE_EXPLOSION) // Set animation style
.setDuration(1500) // Set animation time
.setStartDelay(300) // Set the delay before the animation
.setHorizontalMultiple(2) // Set the amplitude of lateral movement, the default is 3
.setVerticalMultiple(2) // Set the vertical movement amplitude, the default is 4
.addAnimatorListener(new SmashAnimator.OnAnimatorListener() {
@Override
public void onAnimatorStart() {
super.onAnimatorStart();
// Callback, the animation starts
Toast.makeText(MainActivity.this, "onAnimatorStart "+view, Toast.LENGTH_SHORT).show();
}
@Override
public void onAnimatorEnd() {
super.onAnimatorEnd();
// Callback, the animation ends
Toast.makeText(MainActivity.this, "onAnimatorEnd "+view, Toast.LENGTH_SHORT).show();
}
}).start();
}
});
// click listener for btn3
btn3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
smasher.with(view)
.setStyle(SmashAnimator.STYLE_FLOAT_BOTTOM) // Set animation style
.setDuration(1500) // Set animation time
.setStartDelay(300) // Set the delay before the animation
.setHorizontalMultiple(2) // Set the amplitude of lateral movement, the default is 3
.setVerticalMultiple(2) // Set the vertical movement amplitude, the default is 4
.addAnimatorListener(new SmashAnimator.OnAnimatorListener() {
@Override
public void onAnimatorStart() {
super.onAnimatorStart();
// Callback, the animation starts
Toast.makeText(MainActivity.this, "onAnimatorStart "+view, Toast.LENGTH_SHORT).show();
}
@Override
public void onAnimatorEnd() {
super.onAnimatorEnd();
// Callback, the animation ends
Toast.makeText(MainActivity.this, "onAnimatorEnd "+view, Toast.LENGTH_SHORT).show();
}
}).start();
}
});
// click listener for btn4
btn4.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
smasher.with(view)
.setStyle(SmashAnimator.STYLE_FLOAT_LEFT) // Set animation style
.setDuration(1500) // Set animation time
.setStartDelay(300) // Set the delay before the animation
.setHorizontalMultiple(2) // Set the amplitude of lateral movement, the default is 3
.setVerticalMultiple(2) // Set the vertical movement amplitude, the default is 4
.addAnimatorListener(new SmashAnimator.OnAnimatorListener() {
@Override
public void onAnimatorStart() {
super.onAnimatorStart();
// Callback, the animation starts
Toast.makeText(MainActivity.this, "onAnimatorStart "+view, Toast.LENGTH_SHORT).show();
}
@Override
public void onAnimatorEnd() {
super.onAnimatorEnd();
// Callback, the animation ends
Toast.makeText(MainActivity.this, "onAnimatorEnd "+view, Toast.LENGTH_SHORT).show();
}
}).start();
}
});
// click listener for btn5
btn5.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
smasher.with(view)
.setStyle(SmashAnimator.STYLE_FLOAT_RIGHT) // Set animation style
.setDuration(1500) // Set animation time
.setStartDelay(300) // Set the delay before the animation
.setHorizontalMultiple(2) // Set the amplitude of lateral movement, the default is 3
.setVerticalMultiple(2) // Set the vertical movement amplitude, the default is 4
.addAnimatorListener(new SmashAnimator.OnAnimatorListener() {
@Override
public void onAnimatorStart() {
super.onAnimatorStart();
// Callback, the animation starts
Toast.makeText(MainActivity.this, "onAnimatorStart "+view, Toast.LENGTH_SHORT).show();
}
@Override
public void onAnimatorEnd() {
super.onAnimatorEnd();
// Callback, the animation ends
Toast.makeText(MainActivity.this, "onAnimatorEnd "+view, Toast.LENGTH_SHORT).show();
}
}).start();
}
});
// click listener for btn6
btn6.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
smasher.with(view)
.setStyle(SmashAnimator.STYLE_FLOAT_TOP) // Set animation style
.setDuration(1500) // Set animation time
.setStartDelay(300) // Set the delay before the animation
.setHorizontalMultiple(2) // Set the amplitude of lateral movement, the default is 3
.setVerticalMultiple(2) // Set the vertical movement amplitude, the default is 4
.addAnimatorListener(new SmashAnimator.OnAnimatorListener() {
@Override
public void onAnimatorStart() {
super.onAnimatorStart();
// Callback, the animation starts
Toast.makeText(MainActivity.this, "onAnimatorStart "+view, Toast.LENGTH_SHORT).show();
}
@Override
public void onAnimatorEnd() {
super.onAnimatorEnd();
// Callback, the animation ends
Toast.makeText(MainActivity.this, "onAnimatorEnd "+view, Toast.LENGTH_SHORT).show();
}
}).start();
}
});
A continuación se muestra el código completo del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.
Java
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import com.fadai.particlesmasher.ParticleSmasher;
import com.fadai.particlesmasher.SmashAnimator;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// creating ParticleSmasher object
ParticleSmasher smasher = new ParticleSmasher(MainActivity.this);
Button btn1=(Button) findViewById(R.id.button1);
Button btn2=(Button) findViewById(R.id.button2);
Button btn3=(Button) findViewById(R.id.button3);
Button btn4=(Button) findViewById(R.id.button4);
Button btn5=(Button) findViewById(R.id.button5);
Button btn6=(Button) findViewById(R.id.button6);
// click listener for btn1
btn1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
smasher.with(view)
.setStyle(SmashAnimator.STYLE_DROP) // Set animation style
.setDuration(1500) // Set animation time
.setStartDelay(300) // Set the delay before the animation
.setHorizontalMultiple(2) // Set the amplitude of lateral movement, the default is 3
.setVerticalMultiple(2) // Set the vertical movement amplitude, the default is 4
.addAnimatorListener(new SmashAnimator.OnAnimatorListener() {
@Override
public void onAnimatorStart() {
super.onAnimatorStart();
// Callback, the animation starts
Toast.makeText(MainActivity.this, "onAnimatorStart "+view, Toast.LENGTH_SHORT).show();
}
@Override
public void onAnimatorEnd() {
super.onAnimatorEnd();
// Callback, the animation ends
Toast.makeText(MainActivity.this, "onAnimatorEnd "+view, Toast.LENGTH_SHORT).show();
}
}).start();
}
});
// click listener for btn2
btn2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
smasher.with(view)
.setStyle(SmashAnimator.STYLE_EXPLOSION) // Set animation style
.setDuration(1500) // Set animation time
.setStartDelay(300) // Set the delay before the animation
.setHorizontalMultiple(2) // Set the amplitude of lateral movement, the default is 3
.setVerticalMultiple(2) // Set the vertical movement amplitude, the default is 4
.addAnimatorListener(new SmashAnimator.OnAnimatorListener() {
@Override
public void onAnimatorStart() {
super.onAnimatorStart();
// Callback, the animation starts
Toast.makeText(MainActivity.this, "onAnimatorStart "+view, Toast.LENGTH_SHORT).show();
}
@Override
public void onAnimatorEnd() {
super.onAnimatorEnd();
// Callback, the animation ends
Toast.makeText(MainActivity.this, "onAnimatorEnd "+view, Toast.LENGTH_SHORT).show();
}
}).start();
}
});
// click listener for btn3
btn3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
smasher.with(view)
.setStyle(SmashAnimator.STYLE_FLOAT_BOTTOM) // Set animation style
.setDuration(1500) // Set animation time
.setStartDelay(300) // Set the delay before the animation
.setHorizontalMultiple(2) // Set the amplitude of lateral movement, the default is 3
.setVerticalMultiple(2) // Set the vertical movement amplitude, the default is 4
.addAnimatorListener(new SmashAnimator.OnAnimatorListener() {
@Override
public void onAnimatorStart() {
super.onAnimatorStart();
// Callback, the animation starts
Toast.makeText(MainActivity.this, "onAnimatorStart "+view, Toast.LENGTH_SHORT).show();
}
@Override
public void onAnimatorEnd() {
super.onAnimatorEnd();
// Callback, the animation ends
Toast.makeText(MainActivity.this, "onAnimatorEnd "+view, Toast.LENGTH_SHORT).show();
}
}).start();
}
});
// click listener for btn4
btn4.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
smasher.with(view)
.setStyle(SmashAnimator.STYLE_FLOAT_LEFT) // Set animation style
.setDuration(1500) // Set animation time
.setStartDelay(300) // Set the delay before the animation
.setHorizontalMultiple(2) // Set the amplitude of lateral movement, the default is 3
.setVerticalMultiple(2) // Set the vertical movement amplitude, the default is 4
.addAnimatorListener(new SmashAnimator.OnAnimatorListener() {
@Override
public void onAnimatorStart() {
super.onAnimatorStart();
// Callback, the animation starts
Toast.makeText(MainActivity.this, "onAnimatorStart "+view, Toast.LENGTH_SHORT).show();
}
@Override
public void onAnimatorEnd() {
super.onAnimatorEnd();
// Callback, the animation ends
Toast.makeText(MainActivity.this, "onAnimatorEnd "+view, Toast.LENGTH_SHORT).show();
}
}).start();
}
});
// click listener for btn5
btn5.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
smasher.with(view)
.setStyle(SmashAnimator.STYLE_FLOAT_RIGHT) // Set animation style
.setDuration(1500) // Set animation time
.setStartDelay(300) // Set the delay before the animation
.setHorizontalMultiple(2) // Set the amplitude of lateral movement, the default is 3
.setVerticalMultiple(2) // Set the vertical movement amplitude, the default is 4
.addAnimatorListener(new SmashAnimator.OnAnimatorListener() {
@Override
public void onAnimatorStart() {
super.onAnimatorStart();
// Callback, the animation starts
Toast.makeText(MainActivity.this, "onAnimatorStart "+view, Toast.LENGTH_SHORT).show();
}
@Override
public void onAnimatorEnd() {
super.onAnimatorEnd();
// Callback, the animation ends
Toast.makeText(MainActivity.this, "onAnimatorEnd "+view, Toast.LENGTH_SHORT).show();
}
}).start();
}
});
// click listener for btn6
btn6.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
smasher.with(view)
.setStyle(SmashAnimator.STYLE_FLOAT_TOP) // Set animation style
.setDuration(1500) // Set animation time
.setStartDelay(300) // Set the delay before the animation
.setHorizontalMultiple(2) // Set the amplitude of lateral movement, the default is 3
.setVerticalMultiple(2) // Set the vertical movement amplitude, the default is 4
.addAnimatorListener(new SmashAnimator.OnAnimatorListener() {
@Override
public void onAnimatorStart() {
super.onAnimatorStart();
// Callback, the animation starts
Toast.makeText(MainActivity.this, "onAnimatorStart "+view, Toast.LENGTH_SHORT).show();
}
@Override
public void onAnimatorEnd() {
super.onAnimatorEnd();
// Callback, the animation ends
Toast.makeText(MainActivity.this, "onAnimatorEnd "+view, Toast.LENGTH_SHORT).show();
}
}).start();
}
});
}
}
Producción:
Publicación traducida automáticamente
Artículo escrito por onlyklohan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA