Timeline 클래스

Timeline 클래스

타임라인은 애니메이션 그룹입니다. 플래시가 생각나네요.

이를 통해 여러개의 애니메이션을 결합하고 상호 작용 로직으로부터 분리할 수 있습니다.

Timeline은 0과 1 사이의 TargetProgress 속성에 의해 재생됩니다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<App>
    <JavaScript>
        function play()
        {
            timeline.playTo(1);
        }

        function reverse()
        {
            timeline.playTo(0);
        }

        function pulse()
        {
            timeline.pulse();
        }

        module.exports = {
            play,
            reverse,
            pulse
        }
    </JavaScript>
    <StackPanel>
        <Rectangle ux:Name="rect" Height="40" Width="100%">
            <SolidColor ux:Name="color" Color="#f00" />
        </Rectangle>
        <Grid ColumnCount="3">
            <Button Text="Play(Green)" Clicked="{play}" />
            <Button Text="Reverse(Red)" Clicked="{reverse}" />
            <Button Text="Pulse" Clicked="{pulse}" />
        </Grid>

        <Timeline ux:Name="timeline">
            <Change Target="rect.Width">
                <Keyframe Value="0" Time="0.3"/>
                <Keyframe Value="100" Time="0.6"/>
            </Change>
            <Change color.Color="#0f0" Duration="0.3" Delay="0.3" />
        </Timeline>
    </StackPanel>
</App>

[[ 동영상 강좌(재생 목록 버튼을 누르세요) ]]

Was this article helpful?

Related Articles