Artefact Animator 基础知识学习

本篇讲解了Artefact Animator 最简单使用和基本知识，包括制作简单动画、动画的控制、动画过程中的事件、属性包装器Getter/Setter、EaseObjectGroup、动画应用自定义缓冲函数等

（一）下面是学习的代码

（1）前台代码MainPage.xaml

<UserControl x:Class="MyArtefactAnimatorDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">


<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="200"></RowDefinition>
<RowDefinition Height="400" ></RowDefinition>  

</Grid.RowDefinitions>

<Grid Grid.Row="1" Height="400">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="leftCol" Width="200"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition x:Name="rightCol" Width="1*"/>
</Grid.ColumnDefinitions>
<Rectangle Fill="#5F303030" Grid.Column="1" />
<Rectangle Fill="#5F1BAFAD" Grid.Column="2"  />
</Grid >
<Canvas x:Name="LayoutRoot" Background="White" Width="800" Height="200" Grid.Row="0">
<Rectangle Height="126"  Name="rectangle1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="220" Fill="#FF1D1C1C" />
<Ellipse Height="100" Width="100" Fill="Blue" Name="ellipse"></Ellipse>
</Canvas>
</Grid>
</UserControl>

（2）后台代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
//添加命名空间
using Artefact.Animation;

namespace MyArtefactAnimatorDemo
{

public partial class MainPage : UserControl
    {
public const string MyColorName = "mycolorname";
public MainPage()
        {
            InitializeComponent();
this.Loaded += new RoutedEventHandler(MainPage_Loaded);
this.MouseLeftButtonDown += new MouseButtonEventHandler(MainPage_MouseLeftButtonDown);
this.MouseMove += new MouseEventHandler(MainPage_MouseMove);


        }

void MainPage_MouseMove(object sender, MouseEventArgs e)
        {

            Point pt = e.GetPosition(null);
            pt.X -= (ellipse.Width / 2);
            pt.Y -= (ellipse.Height / 2);
            ellipse.SlideTo(pt.X, pt.Y, 1.2, AnimationTransitions.ElasticEaseOut, 0);

        }

void MainPage_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Point pt = e.GetPosition(null);
double time = .8;
double delay = 0;
            PercentHandler ease = AnimationTransitions.CubicEaseOut;

//(一)简单动画
//案例一
            ArtefactAnimator.AddEase(rectangle1, AnimationTypes.X, pt.X, time, ease, delay);
            ArtefactAnimator.AddEase(rectangle1, AnimationTypes.Y, pt.Y, time, ease, delay);
//在一个ArtefactAnimator中实现上面相同的效果（通过传递多个属性）
            ArtefactAnimator.AddEase(rectangle1,
new object[] { AnimationTypes.X, AnimationTypes.Y },
new object[] { pt.X, pt.Y },
                time, ease, delay);
//案例二
            var rnd = new System.Random();
double widthPixels = (rnd.NextDouble() * 200) + 100;
double widthStar = rnd.NextDouble() * 1;  
// animates a column width - using pixels
//ArtefactAnimator.AddEase(leftCol, AnimationTypes.ColumWidthPixels, widthPixels, time, ease, delay);
            //// animates a column width - using star
            //ArtefactAnimator.AddEase(rightCol, AnimationTypes.ColumWidthStar, widthStar, time, ease, delay);
//（二）动画控制
//(1)Stop()
//(2)Finish()
//(3)Start()
            UIElement element = ellipse as UIElement;
            var elementObject= element.AutoAlphaTo(0, time, ease, delay);
//elementObject.Stop();
//elementObject.Finish();
            elementObject.Start();
//(三)事件
//(1)Complete
//(2)Update
//(3)Stopped
//(4)Begin
// CallBack例如  elementObject.Callback(callback);
//var elementOb = element.ScaleTo(50, 50,time,ease,delay);
//动画完成之后
            elementObject.Complete += new EaseObjectHandler(elementOb_Complete);
//(四)Getter/Setter
//允许更复杂的动画而且用法非常简单
//(1)创建包装器名称
// public const string MyColorName = "mycolorname";
//(2)创建包装器
            var MyColorGetterSetter=new GetterSetter
            {
                Getter=(obj,data)=>obj,
                Setter=(obj,data,per)=>
                    {
                        var c =EaseHelper.EaseValue((Color)data.ValueStart,(Color)data.ValueEnd,per);
                        var o = (Color)obj;
                        o.A = c.A;
                        o.B = c.B;
                        o.R = c.R;
                    }
            };
//(3)注册包装器
            AnimationTypes.RegisterGetterSetter("mycolorname", MyColorGetterSetter);
//(4)使用           
            var color = Color.FromArgb(1, 255, 255, 255);
            var newColor = Color.FromArgb(1, (byte) (rnd.NextDouble()*255), (byte) (rnd.NextDouble()*255), (byte) (rnd.NextDouble()*255));
            ArtefactAnimator.AddEase(color, "mycolorname", newColor, time, ease, delay);
//(5)如果你只是使用依赖属性，你可以使用字符串通过RegisterShortcut方法
            AnimationTypes.RegisterShortcut("alpha",UIElement.OpacityProperty);
//(五)EaseObjectGroup
            var easeGroup = new EaseObjectGroup();
            easeGroup.Complete += new EaseObjectGroupCompleteHandler(easeGroup_Complete);
for (var i = 0; i < 4; i++)
            {
                var width = .3 + (rnd.NextDouble() * 2.7);
                var eo = ArtefactAnimator.AddEase(leftCol, new[] { AnimationTypes.ColumWidthStar }, new object[] { width }, 1, AnimationTransitions.ElasticEaseOut, i * .5);
                easeGroup.AddEaseObject(eo);               

            }
//（六）自定义缓冲函数
//自定义的缓冲函数可以在任意事件被添加
            ArtefactAnimator.AddEase(element, "x", 250, time, QuarterEase, delay);









        }
//自定义 缓冲函数
        public double QuarterEase(double ellapsedTime)
        {
return Math.Round(ellapsedTime / .25) * .25;
        }

void easeGroup_Complete(EaseObjectGroup easeObjectGroup)
        {
double time = .8;
double delay = 0;
            PercentHandler ease = AnimationTransitions.CubicEaseOut;         
            UIElement element = ellipse as UIElement;
            var elementObject = element.AutoAlphaTo(80, time, ease, delay);
//elementObject.Stop();
//elementObject.Finish();
            elementObject.Start();
        }


void elementOb_Complete(EaseObject easeObject, double percent)
        {
double time = .8;
double delay = 0;
            PercentHandler ease = AnimationTransitions.CubicEaseOut;
            UIElement element = ellipse as UIElement;
            var elementObject = element.AutoAlphaTo(80, time, ease, delay);
//elementObject.Stop();
//elementObject.Finish();
            elementObject.Start();
//var elementO = element.ScaleTo(50, 50, time, ease, delay);
//elementO.Start();
            

        }

void MainPage_Loaded(object sender, RoutedEventArgs e)
        { 


        }
    }
}

（二）案例演示

在线演示

源代码下载