android supports animation

This commit is contained in:
pengfei.zhou
2019-11-29 15:07:32 +08:00
parent 410ad72d71
commit 4e596642f2
3 changed files with 100 additions and 67 deletions

View File

@@ -1,75 +1,79 @@
import { animate, Group, Panel, gravity, Color, LayoutSpec, vlayout, scroller, layoutConfig, IVLayout, modal, IText, network, View, stack } from "doric";
import { title, label, colors, box } from "./utils";
import { animate, Group, Panel, gravity, Color, LayoutSpec, vlayout, scroller, layoutConfig, IVLayout, modal, IText, network, View, stack, IHLayout, hlayout, IView, text } from "doric";
import { title, colors, box } from "./utils";
function thisLabel(str: string) {
return text({
text: str,
width: 100,
height: 50,
bgColor: colors[4],
textSize: 20,
textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(),
})
}
@Entry
class AnimatorDemo extends Panel {
build(rootView: Group): void {
const view = box(2)
let idx = 0
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 = () => {
animate(this)({
animations: () => {
view.width = view.height = 20
},
duration: 3000,
}).then(() => {
modal(context).toast('Fininshed')
}, (e: any) => {
modal(context).toast(`${e}`)
})
}
}),
label('Width').apply({
width: 100,
height: 50,
bgColor: colors[0],
textSize: 20,
textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(),
} as IText).also(v => {
v.onClick = () => {
animate(this)({
animations: () => {
view.width = 300
},
duration: 3000,
}).then(() => {
modal(context).toast('Fininshed')
}, (e: any) => {
modal(context).toast(`${e}`)
})
}
}),
label('Height').apply({
width: 100,
height: 50,
bgColor: colors[0],
textSize: 20,
textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(),
} as IText).also(v => {
v.onClick = () => {
animate(this)({
animations: () => {
view.height = 300
},
duration: 3000,
}).then(() => {
modal(context).toast('Fininshed')
}, (e: any) => {
modal(context).toast(`${e}`)
})
}
}),
vlayout(
[
hlayout([
thisLabel('Reset').apply({
onClick: () => {
animate(this)({
animations: () => {
view.width = view.height = 20
},
duration: 3000,
}).then(() => {
modal(context).toast('Fininshed')
}).catch(e => {
modal(context).toast(`${e}`)
})
}
}),
]),
hlayout([
thisLabel('Width').apply({
onClick: () => {
animate(this)({
animations: () => {
view.width = 200
},
duration: 3000,
})
}
}),
thisLabel('Height').apply({
onClick: () => {
animate(this)({
animations: () => {
view.height = 200
},
duration: 3000,
})
}
}),
]).apply({ space: 10 } as IHLayout),
hlayout([
thisLabel('BgColor').apply({
onClick: () => {
animate(this)({
animations: () => {
view.bgColor = colors[(idx++) % colors.length]
},
duration: 3000,
});
}
}),
]).apply({ space: 10 } as IHLayout),
]
).apply({ space: 10 } as IVLayout),
stack([
view.also(v => {
v.left = 20