퓨즈[Fusetools] 문서[Docs] 번역

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. 트리거와 애니메이션
  4. 타임라인[Timeline]

타임라인[Timeline]

Timeline 클래스

여러 애니메이션을 함께 그룹화 합니다.

이를 통해 여러 애니메이션을 그룹화하고 상호 작용 논리에서 분리할 수 있습니다.

타임라인은 0에서 1 사이의 TargetProgress 속성에 애니메이션을 적용하여 재생할 수 있습니다.

참고: 타임라인 자체는 여러 애니메이터를 그룹화하여 키 프레임 애니메이션을 만들려는 의도가 아닙니다. 이를 달성하기 위해 키 프레임을 애니메이터 자체에 추가할 수 있습니다.

잘못된 예:

1
2
3
4
<Timeline>
    <Change rect.Opacity="1" Delay="0.0" Duration="0.5" />
    <Change rect.Opacity="0" Delay="0.5" Duration="0.5" />
</Timeline>

옳은 예:

1
2
3
4
5
6
<Timeline>
    <Change Target="rect.Opacity">
        <Keyframe Value="1" Time="0.5" />
        <Keyframe Value="0" Time="1.0" />
    </Change>
</Timeline>

예제

다음은 타임라인을 사용하여 사각형의 여러 속성(width와 color)에 애니메이션을 적용한 다음 두 개의 버튼을 클릭하여 이 타임라인의 시작과 끝 사이를 재생하는 방법의 예입니다.

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
<StackPanel>
    <Rectangle ux:Name="rect" Height="40" Width="100%">
        <SolidColor ux:Name="color" Color="#f00" />
    </Rectangle>
    <Grid ColumnCount="2">
        <Button Text="Red">
            <Clicked>
                <Set timeline.TargetProgress="0" />
            </Clicked>
        </Button>
        <Button Text="Green">
            <Clicked>
                <Set timeline.TargetProgress="1" />
            </Clicked>
        </Button>
    </Grid>

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

Timeline의 인터페이스

링크로 대신합니다: https://www.fusetools.com/docs/fuse/triggers/timeline#section-table-of-contents

Was this article helpful to you? Yes No

How can we help?