Skip to main content
Version: Next

Badge Animation Sample Code

It is possible to achieve this kind of animation code by using nothing but ListView.

While preparing this example, the guide below was used:

Using ListView or GridView with UI Editor
scripts/pages/pgBadgeAnimation.ts
import PgBadgeAnimationDesign from "generated/pages/pgBadgeAnimation";
import System from "@smartface/native/device/system";import { Route, Router } from "@smartface/router";
import Animator from "@smartface/native/ui/animator";
import LviBadge from "components/LviBadge";
import FlImage from "components/FlImage";


//You should create new Page from UI-Editor and extend with it.
export default class PgBadgeAnimation extends PgBadgeAnimationDesign {
    myButton: Button;
    constructor(private router?: Router, private route?: Route) {
    super({});
  }

  // The page design has been made from the code for better
  // showcase purposes. As a best practice, remove this and
  // use WYSIWYG editor to style your pages.
  centerizeTheChildrenLayout() {
    this.dispatch({
        type: "updateUserStyle",
        userStyle: {
            flexProps: {
              flexDirection: 'ROW',
              justifyContent: 'CENTER',
              alignItems: 'CENTER',
              flexWrap: 'WRAP'
            }
        }
    })
  }

  initListView() {
    this.myListView.onPullRefresh = () => {
      this.refreshListView();
      this.myListView.stopRefresh();
    };

    this.myListView.onRowSelected = (listViewItem: LviBadge, index: number) => {
      console.log("selected index = " + index);
      const visibleScale = { x: 1, y: 1 };
      const inVisibleScale = { x: 0, y: 0 };
      const animationTime = 150;
      const flexlayouts: FlImage[] = [
        listViewItem.flImage,
        listViewItem.flImage1,
        listViewItem.flImage2,
        listViewItem.flImage3,
        listViewItem.flImage4,
      ];
      flexlayouts.forEach((layout) => {
        layout.scale = inVisibleScale;
      });

      Animator.animate(flexlayouts[0].getParent(), animationTime, () => {
        flexlayouts[0].scale = visibleScale;
      })
        .then(animationTime, () => (flexlayouts[1].scale = visibleScale))
        .then(animationTime, () => (flexlayouts[2].scale = visibleScale))
        .then(animationTime, () => (flexlayouts[3].scale = visibleScale))
        .then(animationTime, () => (flexlayouts[4].scale = visibleScale))
        .complete(() => {
          console.log(" Animation is over ");
        });
    };
    }

    refreshListView() {
        this.myListView.refreshData();
      }
  onShow() {
    super.onShow();
    const { headerBar } = System.OS === System.OSType.ANDROID ? this : this.parentController;
    Application.statusBar.visible = true;
    headerBar.visible = true;
  }

  onLoad() {
    super.onLoad();
    this.centerizeTheChildrenLayout();

    this.initListView();
  }
}
info

For the image, icon.png was used as app icon, but iOS is unable to get that image. You should generate icon.png as Smartface icon in order to get this example working. Check below on how to generate image:

Image Generation