Badge Animation Sample Code

JavaScript
JavaScript
const System = require("sf-core/device/system");
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const Color = require('sf-core/ui/color');
const Label = require('sf-core/ui/label');
const FlexLayout = require('sf-core/ui/flexlayout');
const ListView = require('sf-core/ui/listview');
const ListViewItem = require('sf-core/ui/listviewitem');
const TextAlignment = require('sf-core/ui/textalignment');
const Font = require('sf-core/ui/font');
const Animator = require("sf-core/ui/animator");
const ImageView = require("sf-core/ui/imageview");
const AlertView = require("sf-core/ui/alertview");
const Share = require("sf-core/share");
const Application = require("sf-core/application");
const Screen = require("sf-core/device/screen");
const GridView = require("sf-core/ui/gridview");
const GridViewItem = require("sf-core/ui/gridviewitem");
const LayoutManager = require("sf-core/ui/layoutmanager");
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
}
});
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
var myListView = new ListView({
height:350,
width: Screen.width,
rowHeight: 60,
itemCount: 15
});
this.layout.addChild(myListView);
myListView.onRowCreate = function() {
var myListViewItem = new ListViewItem();
let mainFlexLayout = new FlexLayout({
flexGrow: 1
})
myListViewItem.flexDirection = FlexLayout.FlexDirection.ROW;
mainFlexLayout.flexDirection = FlexLayout.FlexDirection.ROW;
let flexlayouts = [];
for (var i = 0; i < 5; i++) {
var flex = new FlexLayout();
flex.marginLeft = 20;
flex.top = 20;
flex.width = 50;
flex.height = 50;
flex.flexDirection = FlexLayout.FlexDirection.ROW;
var imageView = new ImageView({
image: "images://icon.png",
left: 0,
width: 50,
height: 40
});
imageView.imageFillType = ImageView.FillType.ASPECTFIT;
flex.addChild(imageView);
var label = new Label();
label.width = 50;
label.height = 10;
label.text = "Text";
label.font = Font.create("Arial", 10, Font.BOLD);
label.textAlignment = TextAlignment.MIDCENTER;
flex.addChild(label);
flexlayouts.push(flex);
mainFlexLayout.addChild(flex);
}
myListViewItem.addChild(mainFlexLayout);
myListViewItem.flexlayouts = flexlayouts;
return myListViewItem;
};
myListView.onRowBind = function(listViewItem, index) {
var flexlayouts = listViewItem.flexlayouts;
};
myListView.onRowSelected = function(listViewItem, index) {
console.log("selected index = " + index)
var flexlayouts = listViewItem.flexlayouts;
flexlayouts.forEach((e) => {
e.scale = {x: 0, y: 0};
});
var rootFlex = (System.OS == "iOS" ? { applyLayout : function(){} } : flexlayouts[0].parent);
Animator.animate(rootFlex, 150, function() {
flexlayouts[0].scale = {x: 1, y: 1};
})
.then(150, () => {
flexlayouts[1].scale = {x: 1, y: 1};
})
.then(150, () => {
flexlayouts[2].scale = {x: 1, y: 1};
})
.then(150, () => {
flexlayouts[3].scale = {x: 1, y: 1};
})
.then(150, () => {
flexlayouts[4].scale = {x: 1, y: 1};
})
.complete(function() {
console.log(" Animation is over ");
});
};
myListView.onPullRefresh = function() {
myListView.refreshData();
myListView.stopRefresh();
}
}
);
module.exports = Page1;