Storyboard Kelas

Definisi

Ruang nama:

Windows.UI.Xaml.Media.Animation

Mengontrol animasi dengan garis waktu, dan menyediakan informasi penargetan objek dan properti untuk animasi anaknya.

public ref class Storyboard sealed : Timeline

/// [Windows.Foundation.Metadata.ContractVersion(Windows.Foundation.UniversalApiContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
/// [Windows.UI.Xaml.Markup.ContentProperty(Name="Children")]
/// [Windows.Foundation.Metadata.Activatable(65536, "Windows.Foundation.UniversalApiContract")]
class Storyboard final : Timeline

[Windows.Foundation.Metadata.ContractVersion(typeof(Windows.Foundation.UniversalApiContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
[Windows.UI.Xaml.Markup.ContentProperty(Name="Children")]
[Windows.Foundation.Metadata.Activatable(65536, "Windows.Foundation.UniversalApiContract")]
public sealed class Storyboard : Timeline

Public NotInheritable Class Storyboard
Inherits Timeline

<Storyboard ...>
  oneOrMoreChildTimelines
</Storyboard>

Warisan

Object Platform::Object IInspectable DependencyObject Timeline Storyboard

Atribut

ActivatableAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute ContentPropertyAttribute

Persyaratan Windows

Rangkaian perangkat	Windows 10 (diperkenalkan dalam 10.0.10240.0)
API contract	Windows.Foundation.UniversalApiContract (diperkenalkan dalam v1.0)

Contoh

Contoh berikut menunjukkan cara menggunakan metode Mulai, Hentikan, Jeda, dan Lanjutkan untuk mengontrol pemutaran papan cerita (animasi). Sekumpulan tombol memungkinkan pengguna untuk memanggil metode ini.

<StackPanel x:Name="LayoutRoot" >
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimation From="1" To="6" Duration="00:00:6" 
            Storyboard.TargetName="rectScaleTransform" 
            Storyboard.TargetProperty="ScaleY">
                <DoubleAnimation.EasingFunction>
                    <BounceEase Bounces="2" EasingMode="EaseOut" 
                            Bounciness="2" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </StackPanel.Resources>

    <!-- Button that begins animation. -->
    <Button Click="Animation_Begin"
         Margin="2" Content="Begin" />

    <!-- Button that pauses Animation. -->
    <Button Click="Animation_Pause"
         Margin="2" Content="Pause" />

    <!-- Button that resumes Animation. -->
    <Button Click="Animation_Resume"
         Margin="2" Content="Resume" />

    <!-- Button that stops Animation. Stopping the animation 
         returns the ellipse to its original location. -->
    <Button Click="Animation_Stop"
         Margin="2" Content="Stop" />

    <Rectangle Fill="Blue" Width="200" Height="30">
        <Rectangle.RenderTransform>
            <ScaleTransform x:Name="rectScaleTransform" />
        </Rectangle.RenderTransform>
    </Rectangle>

</StackPanel>

private void Animation_Begin(object sender, RoutedEventArgs e)
{
    myStoryboard.Begin();
}
private void Animation_Pause(object sender, RoutedEventArgs e)
{
    myStoryboard.Pause();
}
private void Animation_Resume(object sender, RoutedEventArgs e)
{
    myStoryboard.Resume();
}
private void Animation_Stop(object sender, RoutedEventArgs e)
{
    myStoryboard.Stop();
}

Private Sub Animation_Begin(sender As Object, e As RoutedEventArgs)
    myStoryboard.Begin()
End Sub

Private Sub Animation_Pause(sender As Object, e As RoutedEventArgs)
    myStoryboard.Pause()
End Sub

Private Sub Animation_Resume(sender As Object, e As RoutedEventArgs)
    myStoryboard.Resume()
End Sub

Private Sub Animation_Stop(sender As Object, e As RoutedEventArgs)
    myStoryboard.Stop()
End Sub

//using Windows.UI.Xaml.Media.Animation;
//using Windows.UI.Xaml.Shapes;
//using Windows.UI

private void Create_And_Run_Animation(object sender, RoutedEventArgs e)
{
    // Create a red rectangle that will be the target
    // of the animation.
    Rectangle myRectangle = new Rectangle();
    myRectangle.Width = 200;
    myRectangle.Height = 200;
    SolidColorBrush myBrush = new SolidColorBrush(Colors.Red);
    myRectangle.Fill = myBrush;

    // Create the transform
    TranslateTransform moveTransform = new TranslateTransform();
    moveTransform.X = 0;
    moveTransform.Y = 0;
    myRectangle.RenderTransform = moveTransform;

    // Add the rectangle to the tree.
    LayoutRoot.Children.Add(myRectangle);

    // Create a duration of 2 seconds.
    Duration duration = new Duration(TimeSpan.FromSeconds(2));
    // Create two DoubleAnimations and set their properties.
    DoubleAnimation myDoubleAnimationX = new DoubleAnimation();
    DoubleAnimation myDoubleAnimationY = new DoubleAnimation();
    myDoubleAnimationX.Duration = duration;
    myDoubleAnimationY.Duration = duration;
    Storyboard justintimeStoryboard = new Storyboard();
    justintimeStoryboard.Duration = duration;
    justintimeStoryboard.Children.Add(myDoubleAnimationX);
    justintimeStoryboard.Children.Add(myDoubleAnimationY);
    Storyboard.SetTarget(myDoubleAnimationX, moveTransform);
    Storyboard.SetTarget(myDoubleAnimationY, moveTransform);

    // Set the X and Y properties of the Transform to be the target properties
    // of the two respective DoubleAnimations.
    Storyboard.SetTargetProperty(myDoubleAnimationX, "X");
    Storyboard.SetTargetProperty(myDoubleAnimationY, "Y");
    myDoubleAnimationX.To = 200;
    myDoubleAnimationY.To = 200;

    // Make the Storyboard a resource.
    LayoutRoot.Resources.Add("justintimeStoryboard", justintimeStoryboard);
    // Begin the animation.
    justintimeStoryboard.Begin();
}

' need Imports for Windows.UI.Xaml.Shapes, Windows.UI.Media.Animation, Windows.UI
Private Sub Create_And_Run_Animation(sender As Object, e As RoutedEventArgs)
    ' Create a red rectangle that will be the target
    ' of the animation.
    Dim myRectangle As Rectangle = New Rectangle
    myRectangle.Width = 200
    myRectangle.Height = 200
    Dim myBrush As SolidColorBrush = New SolidColorBrush(Colors.Red)
    myRectangle.Fill = myBrush

   ' Create the transform
    Dim moveTransform As TranslateTransform = New TranslateTransform
    moveTransform.X = 0
    moveTransform.Y = 0
    myRectangle.RenderTransform = moveTransform

    ' Add the rectangle to the tree.
    LayoutRoot.Children.Add(myRectangle)

    ' Create a duration of 2 seconds.
    Dim duration As Duration = New Duration(TimeSpan.FromSeconds(2))
    ' Create two DoubleAnimations and set their properties.
    Dim myDoubleAnimationX As DoubleAnimation = New DoubleAnimation
    Dim myDoubleAnimationY As DoubleAnimation = New DoubleAnimation
    myDoubleAnimationX.Duration = duration
    myDoubleAnimationY.Duration = duration
    Dim justintimeStoryboard As Storyboard = New Storyboard
    justintimeStoryboard.Duration = duration
    justintimeStoryboard.Children.Add(myDoubleAnimationX)
    justintimeStoryboard.Children.Add(myDoubleAnimationY)
    Storyboard.SetTarget(myDoubleAnimationX, moveTransform)
    Storyboard.SetTarget(myDoubleAnimationY, moveTransform)

    ' Set the X and Y properties of the Transform to be the target properties
    ' of the two respective DoubleAnimations.
    Storyboard.SetTargetProperty(myDoubleAnimationX, "X")
    Storyboard.SetTargetProperty(myDoubleAnimationY, "Y")
    myDoubleAnimationX.To = 200
    myDoubleAnimationY.To = 200

    ' Make the Storyboard a resource.
    LayoutRoot.Resources.Add("justintimeStoryboard", justintimeStoryboard)
    ' Begin the animation.
    justintimeStoryboard.Begin()
End Sub

Keterangan

Papan cerita adalah kelas penting dalam konsep animasi papan cerita. Untuk informasi selengkapnya tentang konsep ini, lihat Animasi storyboard.

Papan cerita digunakan untuk properti ini:

• VisualState.Storyboard
• VisualTransition.Storyboard
• BeginStoryboard.Storyboard

Properti ini bukan satu-satunya tempat di mana Storyboard ditentukan. Cara umum Storyboard digunakan untuk animasi storyboard adalah bahwa Storyboard didefinisikan dalam koleksi Sumber Daya ( Baik Application.Resources atau FrameworkElement.Resources, atau mungkin sebagai sumber daya dalam file seperti Generic.xaml untuk kontrol kustom). Setiap kali didefinisikan sebagai sumber daya XAML, Anda harus selalu menetapkan nilai atribut x:Name ke Storyboard Anda. Anda kemudian dapat mereferensikan nama sebagai variabel pemrograman nanti di code-behind. Anda akan memerlukan referensi ini untuk benar-benar menjalankan animasi yang dikandung Storyboard, dengan memanggil metode Mulai pada instans Storyboard tersebut. Papan cerita juga memiliki metode kontrol lain seperti Stop yang dapat mengontrol animasi setelahnya.

Papan cerita mewarisi beberapa properti dari Garis Waktu. Properti ini dapat diterapkan baik ke Storyboard atau ke salah satu animasi di dalamnya (dalam koleksi Anak ). Ada pro dan kontra untuk mengatur properti Garis Waktu di Storyboard utama alih-alih pada setiap animasi. Untuk informasi selengkapnya, lihat Animasi storyboarded.

Anda juga memerlukan Papan Cerita untuk mengontrol animasi yang telah ditentukan sebelumnya yang Anda tambahkan ke kontrol atau UI, jika Anda menggunakan salah satu animasi tema. Animasi tema tidak memiliki titik pemicu bawaan, jadi Anda perlu berisi animasi tema di Papan Cerita sebagai Anak-anak. Jika Storyboard digunakan sebagai nilai VisualState.Storyboard , animasi akan berjalan saat status visual tersebut dimuat. Atau, jika berada di VisualTransition.Storyboard, animasi berjalan saat transisi tersebut terdeteksi oleh manajer status visual. Ini adalah cara paling umum untuk menggunakan animasi tema, tetapi Anda juga dapat meletakkannya di sumber daya Storyboard yang longgar dan secara eksplisit memulai animasi dengan memanggil Mulai. Untuk informasi selengkapnya tentang cara menggunakan animasi tema, lihat Mulai Cepat: Menganimasikan UI Anda menggunakan animasi pustaka atau animasi Storyboarded untuk status visual.

Properti terlampir XAML

Papan cerita adalah kelas layanan host untuk beberapa properti terlampir XAML. Ini memungkinkan animasi anak di bawah kontrol oleh Storyboard ke setiap elemen target terpisah target dan properti target, sambil tetap mengikuti garis waktu pengendalian dan mekanisme pemicu yang sama dengan induk.

Untuk mendukung akses prosesor XAML ke properti terlampir, dan juga untuk mengekspos operasi get dan set yang setara ke kode, setiap properti terlampir XAML memiliki sepasang metode aksesor Get and Set. Cara lain untuk mendapatkan atau mengatur nilai dalam kode adalah dengan menggunakan sistem properti dependensi, memanggil GetValue atau SetValue dan meneruskan bidang pengidentifikasi sebagai pengidentifikasi properti dependensi.

Properti terlampir	Deskripsi
TargetName	Mendapatkan atau mengatur nama objek untuk dianimasikan.
TargetProperty	Mendapatkan atau mengatur properti yang harus dianimasikan.

Konstruktor

Storyboard()

Menginisialisasi instans baru kelas Storyboard .

Properti

AutoReverse	Mendapatkan atau menetapkan nilai yang menunjukkan apakah garis waktu diputar secara terbalik setelah menyelesaikan perulangan ke depan. (Diperoleh dari Timeline)
BeginTime	Mendapatkan atau mengatur waktu di mana Garis Waktu ini harus dimulai. (Diperoleh dari Timeline)
Children	Mendapatkan koleksi objek Garis Waktu anak.
Dispatcher	Mendapatkan CoreDispatcher yang dikaitkan dengan objek ini. CoreDispatcher mewakili fasilitas yang dapat mengakses DependencyObject pada utas UI bahkan jika kode dimulai oleh utas non-UI. (Diperoleh dari DependencyObject)
Duration	Mendapatkan atau mengatur lamanya waktu pemutaran garis waktu ini, bukan menghitung pengulangan. (Diperoleh dari Timeline)
FillBehavior	Mendapatkan atau menetapkan nilai yang menentukan bagaimana animasi berperilaku setelah mencapai akhir periode aktifnya. (Diperoleh dari Timeline)
RepeatBehavior	Mendapatkan atau mengatur perilaku berulang dari garis waktu ini. (Diperoleh dari Timeline)
SpeedRatio	Mendapatkan atau menetapkan laju, relatif terhadap induknya, pada saat itu berlangsung untuk Garis Waktu ini. (Diperoleh dari Timeline)
TargetNameProperty	Mengidentifikasi properti Storyboard.TargetName XAML terlampir.
TargetPropertyProperty	Mengidentifikasi properti Terlampir Storyboard.TargetProperty XAML.

Properti yang Terlampir

TargetName	Mendapatkan atau mengatur nama objek untuk dianimasikan.
TargetProperty	Mendapatkan atau mengatur properti yang harus dianimasikan.

Metode

Begin()	Memulai set animasi yang terkait dengan papan cerita.
ClearValue(DependencyProperty)	Menghapus nilai lokal properti dependensi. (Diperoleh dari DependencyObject)
GetAnimationBaseValue(DependencyProperty)	Mengembalikan nilai dasar apa pun yang ditetapkan untuk properti dependensi, yang akan berlaku dalam kasus di mana animasi tidak aktif. (Diperoleh dari DependencyObject)
GetCurrentState()	Mendapatkan status jam Papan Cerita.
GetCurrentTime()	Mendapatkan waktu jam animasi papan cerita saat ini.
GetTargetName(Timeline)	Mendapatkan nilai properti Terlampir Storyboard.TargetName XAML dari elemen target.
GetTargetProperty(Timeline)	Mendapatkan nilai properti terlampir Storyboard.TargetProperty XAML dari elemen target.
GetValue(DependencyProperty)	Mengembalikan nilai efektif properti dependensi saat ini dari DependencyObject. (Diperoleh dari DependencyObject)
Pause()	Menjeda jam animasi yang terkait dengan papan-cerita.
ReadLocalValue(DependencyProperty)	Mengembalikan nilai lokal properti dependensi, jika nilai lokal ditetapkan. (Diperoleh dari DependencyObject)
RegisterPropertyChangedCallback(DependencyProperty, DependencyPropertyChangedCallback)	Mendaftarkan fungsi pemberitahuan untuk mendengarkan perubahan pada DependencyProperty tertentu pada instans DependencyObject ini. (Diperoleh dari DependencyObject)
Resume()	Melanjutkan jam animasi, atau status run-time, yang terkait dengan papan-cerita.
Seek(TimeSpan)	Memindahkan papan-cerita ke posisi animasi yang ditentukan. Papan cerita melakukan pencarian yang diminta ketika tanda centang jam berikutnya terjadi.
SeekAlignedToLastTick(TimeSpan)	Memindahkan papan-cerita ke posisi animasi yang ditentukan segera (secara sinkron).
SetTarget(Timeline, DependencyObject)	Menyebabkan Garis Waktu yang ditentukan menargetkan objek yang ditentukan.
SetTargetName(Timeline, String)	Mengatur nilai properti terlampir Storyboard.TargetName XAML untuk elemen target.
SetTargetProperty(Timeline, String)	Mengatur nilai properti terlampir Storyboard.TargetProperty XAML untuk elemen target.
SetValue(DependencyProperty, Object)	Mengatur nilai lokal properti dependensi pada DependencyObject. (Diperoleh dari DependencyObject)
SkipToFill()	Memajukan waktu saat ini dari jam papan cerita ke akhir periode aktifnya.
Stop()	Menghentikan papan cerita.
UnregisterPropertyChangedCallback(DependencyProperty, Int64)	Membatalkan pemberitahuan perubahan yang sebelumnya terdaftar dengan memanggil RegisterPropertyChangedCallback. (Diperoleh dari DependencyObject)

Acara

Completed

Terjadi ketika objek Storyboard telah selesai diputar. (Diperoleh dari Timeline)

Lihat juga

• Timeline
• TimelineCollection
• Storyboard
• Storyboard
• Animasi papan cerita
• Animasi papan cerita untuk status visual
• Animasi bingkai kunci dan animasi fungsi permudah
• Mulai cepat: Menganimasikan UI Anda menggunakan animasi pustaka
• Sintaks jalur properti
• Gambaran umum properti terlampir