This repository has been archived on 2024-07-22. You can view files and clone it, but cannot push or open issues or pull requests.
Doric/demo/src/AnimatorDemo.ts
2019-11-29 13:00:06 +08:00

80 lines
2.8 KiB
TypeScript

import { Group, Panel, popover, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, Text, scroller, layoutConfig, image, IView, IVLayout, ScaleType, modal, IText, network, animator, View, stack } from "doric";
import { title, label, colors, box } from "./utils";
@Entry
class AnimatorDemo extends Panel {
build(rootView: Group): void {
const view = box(2)
scroller(vlayout([
title("Animator Demo"),
label('Reset').apply({
width: 100,
height: 50,
bgColor: colors[4],
textSize: 20,
textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(),
} as IText).also(v => {
v.onClick = () => {
animator(this)({
animations: () => {
view.width = view.height = 20
},
duration: 3000,
})
}
}),
label('Width').apply({
width: 100,
height: 50,
bgColor: colors[0],
textSize: 20,
textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(),
} as IText).also(v => {
v.onClick = () => {
animator(this)({
animations: () => {
view.width = 500
},
duration: 3000,
})
}
}),
label('Height').apply({
width: 100,
height: 50,
bgColor: colors[0],
textSize: 20,
textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(),
} as IText).also(v => {
v.onClick = () => {
animator(this)({
animations: () => {
view.height = 500
},
duration: 3000,
complete: () => {
modal(context).toast('Fininshed')
}
})
}
}),
stack([
view.also(v => {
v.left = 20
})
]).apply({
layoutConfig: layoutConfig().atmost(),
bgColor: colors[3],
}),
]).apply({
layoutConfig: layoutConfig().atmost().h(LayoutSpec.WRAP_CONTENT),
gravity: gravity().center(),
space: 10,
} as IVLayout)).apply({
layoutConfig: layoutConfig().atmost(),
}).in(rootView)
}
}