tianzixuan/Doric
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat:iOS Affects Transformation

Browse Source
This commit is contained in:
pengfei.zhou
2019-12-02 18:07:03 +08:00
parent 7f278073f3
commit 1cd84d8720
6 changed files with 298 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
demo/index.ts
View File

@@ -16,4 +16,5 @@ export default [
'src/FlowLayoutDemo',
'src/PopoverDemo',
'src/AnimatorDemo',
'src/ComplicatedAnimations',
]

34
demo/src/AnimatorDemo.ts
View File

@@ -167,40 +167,6 @@ class AnimatorDemo extends Panel {
});
}
}),
thisLabel('animationSet').apply({
onClick: () => {
const animationSet = new AnimationSet
//animationSet.fillMode = FillMode.Removed
const translate = new TranslationAnimation
translate.fromTranslationX = 100
translate.toTranslationX = 200
translate.fromTranslationY = 10
translate.toTranslationY = 200
translate.duration = 2000
translate.delay = 1000
translate.fillMode = FillMode.Forward
const scale = new ScaleAnimation
scale.fromScaleX = 1
scale.toScaleX = 5
scale.fromScaleY = 1
scale.toScaleY = 5
//scale.delay = 1000
scale.duration = 2000
scale.fillMode = FillMode.Backward
const rotation = new RotationAnimation
rotation.fromRotation = 0
rotation.toRotation = 6.3
rotation.duration = 2000
rotation.fillMode = FillMode.Removed
animationSet.addAnimation(translate)
animationSet.addAnimation(scale)
animationSet.addAnimation(rotation)
view.doAnimation(context, animationSet).then(() => {
modal(context).toast('Animation finished')
})
}
}),
]).apply({ space: 10 } as IHLayout),
]
).apply({ space: 10 } as IVLayout),

110
demo/src/ComplicatedAnimations.ts Normal file
View File

@@ -0,0 +1,110 @@
import { animate, Group, Panel, gravity, Color, AnimationSet, vlayout, scroller, layoutConfig, IVLayout, modal, IText, network, View, stack, IHLayout, hlayout, IView, text, TranslationAnimation, ScaleAnimation, RotationAnimation, FillMode } from "doric";
import { title, colors, box } from "./utils";
function thisLabel(str: string) {
return text({
text: str,
width: 80,
height: 30,
bgColor: colors[0],
textSize: 10,
textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(),
})
}
@Entry
class AnimationDemo extends Panel {
build(rootView: Group): void {
const view = box(2)
view.onClick = () => {
modal(context).toast('Clicked')
}
vlayout([
title("Complicated Animation"),
vlayout(
[
hlayout([
thisLabel('TranslationX').apply({
onClick: () => {
const animation = new TranslationAnimation
animation.duration = 1000
animation.fromTranslationX = view.translationX || 0
animation.toTranslationX = animation.fromTranslationX + 100
animation.fromTranslationY = view.translationY || 0
animation.toTranslationY = view.translationY || 0
view.doAnimation(context, animation)
}
}),
thisLabel('TranslationY').apply({
onClick: () => {
const animation = new TranslationAnimation
animation.duration = 1000
animation.fromTranslationX = view.translationX || 0
animation.toTranslationX = view.translationX || 0
animation.fromTranslationY = view.translationY || 0
animation.toTranslationY = animation.fromTranslationY + 100
view.doAnimation(context, animation)
}
}),
thisLabel('ScaleX').apply({
onClick: () => {
const animation = new ScaleAnimation
animation.duration = 1000
animation.fromScaleX = 0
animation.toScaleX = 5
view.doAnimation(context, animation)
}
}),
thisLabel('ScaleY').apply({
onClick: () => {
const animation = new ScaleAnimation
animation.duration = 1000
animation.fromScaleY = 0
animation.toScaleY = 5
view.doAnimation(context, animation)
}
}),
thisLabel('rotation').apply({
onClick: () => {
const animation = new RotationAnimation
animation.duration = 1000
animation.fromRotation = 0
animation.toRotation = 4
view.doAnimation(context, animation)
}
}),
]).apply({ space: 10 } as IHLayout),
hlayout([
thisLabel('group').apply({
onClick: () => {
const rotation = new RotationAnimation
rotation.duration = 1000
rotation.fromRotation = 0
rotation.toRotation = 4
const translation = new TranslationAnimation
translation.duration = 1000
translation.fromTranslationX = view.translationX || 0
translation.toTranslationX = 100
const animationSet = new AnimationSet
animationSet.addAnimation(rotation)
animationSet.addAnimation(translation)
view.doAnimation(context, animationSet)
}
}),
]).apply({ space: 10 } as IHLayout),
]
).apply({ space: 10 } as IVLayout),
stack([
view,
]).apply({
layoutConfig: layoutConfig().atmost(),
bgColor: colors[1].alpha(0.3 * 255),
}),
]).apply({
layoutConfig: layoutConfig().atmost(),
gravity: gravity().center(),
space: 10,
} as IVLayout).in(rootView)
}
}