El Arsenal de Android – Animaciones

AXrLottie Renderizar animaciones
y vectores exportados a formato JSON bodymovin
GitHub • Versiones


Captura de pantalla

Resumen

Instalación

AXrLottie está disponible en JCenter, por lo que solo necesita agregarlo como una dependencia (módulo Gradle)

Gradle

implementation 'com.aghajari.rlottie:AXrLottie:1.0.0'

Experto de

<dependency>
  <groupId>com.aghajari.rlottie</groupId>
  <artifactId>AXrLottie</artifactId>
  <version>1.0.0</version>
  <type>pom</type>
</dependency>

Primero debes saber que son Lotse?

Lottie carga y renderiza animaciones y vectores exportados al formato JSON bodymovin. Bodymovin JSON se puede crear y exportar desde After Effects con bodymovin, Sketch con Lottie Sketch Export y desde Haiku.

Por primera vez, los diseñadores pueden crear y distribuir hermosas animaciones sin que un ingeniero las vuelva a crear meticulosamente a mano. Dado que la animación es compatible con JSON, son de tamaño extremadamente pequeño, pero pueden ser de gran complejidad.

¡Vamos a empezar! ?

Instalar AXrLottie

Primer paso, debe instalar AXrLottie

Uso básico

Cree un AXrLottieImageView en su diseño.

<com.aghajari.rlottie.AXrLottieImageView
        android:id="@+id/lottie_view"
        android:layout_width="180dp"
        android:layout_height="180dp"
        android:layout_gravity="center"/>

Ahora solo tienes que subir tu lote de animación

lottieView.setLottieDrawable(AXrLottieDrawable.fromAssets(this,fileName)
                .setSize(width,height)
                .build());
lottieView.playAnimation();

puede cargar archivos por lotes de las siguientes fuentes:

  • Expediente
  • Json (cadena)
  • URL
  • Recursos
  • Recurso
  • InputStram

lottoe almacenará en caché animaciones y archivos que puede deshabilitar en el caché en AXrLottieDrawable Builder

Producción

LayerProperty

lottieView.setLayerProperty("layer_name.**", AXrLottieProperty.colorProperty(color));

Propiedad:

  • Color
  • FillOpacity
  • Carrera Opacidad
  • Anchura del trazo
  • TrAnchor
  • TrOpacidad
  • TrPosition
  • TrRotación
  • TrScale

Producción

AnimaciónCapas

for (AXrLottieLayerInfo layerInfo : lottieDrawable.getLayers()) {
    Log.i("AXrLottie", "layerName: " + layerInfo.getName());
}

Lottie2Gif

¡puedes exportar lotes y animaciones como GIF! gracias a gif-h

AXrLottie2Gif.create(lottieDrawable)
                .setListener(new AXrLottie2Gif.Lottie2GifListener() {
                    long start;

                    @Override
                    public void onStarted() {
                        start = System.currentTimeMillis();
                    }

                    @Override
                    public void onProgress(int frame, int totalFrame) {
                        log("progress : " + frame + "/" + totalFrame);
                    }

                    @Override
                    public void onFinished() {
                        log("GIF created (" + (System.currentTimeMillis() - start) + "ms)rn" +
                                "Resolution : " + gifSize + "x" + gifSize + "rn" +
                                "Path : " + file.getAbsolutePath() + "rn" +
                                "File Size : " + (file.length() / 1024) + "kb");
                    }
                })
                .setBackgroundColor(Color.WHITE)
                .setOutputPath(file)
                .setSize(gifSize, gifSize)
                .setBackgroundTask(true)
                .setDithering(false)
                .setDestroyable(true)
                .build();

Producción

Oyentes

OnFrameChangedListener:

void onFrameChanged(AXrLottieDrawable drawable, int frame);

OnFrameRenderListener:

void onUpdate(AXrLottieDrawable drawable, int frame, long timeDiff, boolean force);
Bitmap renderFrame(AXrLottieDrawable drawable, Bitmap bitmap, int frame);

AnimatedSticker – AXEmojiView

puede crear AXrLottieImageView en AXEmojiView / StickerView usando este código:

AXEmojiManager.setStickerViewCreatorListener(new StickerViewCreatorListener() {
    @Override
    public View onCreateStickerView(@NonNull Context context, @Nullable StickerCategory category, boolean isRecent) {
        return new AXrLottieImageView(context);
    }
    
    @Override
    public View onCreateCategoryView(@NonNull Context context) {
        return new AXrLottieImageView(context);
    }
});

agrégalo justo después AXEmojiManager.install

y puedes subir tus animaciones a StickerProvider

  @Override
    public StickerLoader getLoader() {
        return new StickerLoader() {
            @Override
            public void onLoadSticker(View view, Sticker sticker) {
                if (view instanceof AXrLottieImageView && sticker instanceof AnimatedSticker) {
                    AXrLottieImageView lottieImageView = (AXrLottieImageView) view;
                    AnimatedSticker animatedSticker = (AnimatedSticker) sticker;
                    if (animatedSticker.drawable==null){
                        animatedSticker.drawable = Utils.createFromSticker(view.getContext(),animatedSticker,100);
                    }
                    lottieImageView.setLottieDrawable(animatedSticker.drawable);
                    lottieImageView.playAnimation();
                }
            }

            @Override
            public void onLoadStickerCategory(View view, StickerCategory stickerCategory, boolean selected) {
                if (view instanceof AXrLottieImageView) {
                    AXrLottieImageView lottieImageView = (AXrLottieImageView) view;
                    AnimatedSticker animatedSticker = (AnimatedSticker) stickerCategory.getCategoryData();
                    if (animatedSticker.drawable==null){
                        animatedSticker.drawable = Utils.createFromSticker(view.getContext(),animatedSticker,50);
                    }
                    lottieImageView.setLottieDrawable(animatedSticker.drawable);
                    //lottieImageView.playAnimation();
                }
            }
        };
    }

Producción

Autor

Samsung / rlottie

Copyright 2020 Amir Hossein Aghajari
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

.

Compruebe también

El arsenal de Android: historias de usuarios

Puedes leerlo en portugués (https://github.com/welbert6/MaterialStoryView/edit/master/ReadmePT.md) Capturas de pantalla Introducción MaterialStoryView es una biblioteca de Android …

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *