• Silverlight:使用Storyboard控制动画自制钟表


    说明:

    1. Storyboard是一种控制时间播放动画的常用方法。 Storyboard 要有Name, 比如clockStoryboard( <Storyboard x:Name="clockStoryboard"/>), 可以使用Name来控制动画的播放与暂停等操作, 如在 Grid的Loaded事件中让动画开始(<Grid Loaded="AnimationStart"/>...在cs文件中定义事件public void AnimationStart(object sender, EventArgs e){ clockStoryboard.Begin();})。
    2. Storyboard中有多种Animation, 如 DoubleAnimation、 ColorAnimation、 PointAnimation。
    3. Storyboard中最重要的两个属性是 Storyboard.TargetName 和 Storyboard.TargetProperty。 其中, TargetProperty说明要在该目标的哪一个属性上做动画,比如在Ellipse的color属性上做动画,那么Storyboard.TargetName="ellipseName" Storyboard.TargetProperty="(Fill).(Color)", 本例中Angle属性是RenderTransform的属性值。
    4. 本例是在Ellipse的RenderTransform上做动画, 使Ellipse绕着中心点转动, 其中hourhand 1小时转动360度。 minitehand 1分钟转动360度。 secondhand 1秒转动360度。
    5. Duration="时: 分:秒" 说明需要多长时间完成一个动画周期。

    MainPage.xaml:
    <UserControl
     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"
     x:Class="SilverlightApplication1.MainPage"
     Width="640" Height="480" mc:Ignorable="d">
     
     <UserControl.Resources>
      <Storyboard x:Name="clockStoryboard">
       <DoubleAnimation x:Name="hourAnimation" Storyboard.TargetName="hourhandTransform" Storyboard.TargetProperty="Angle" Duration="12:0:0" RepeatBehavior="Forever" To="360"></DoubleAnimation>
       <DoubleAnimation x:Name="minuteAnimation" Storyboard.TargetName="minutehandTransform" Storyboard.TargetProperty="Angle" Duration="1:0:0" RepeatBehavior="Forever" To="360"></DoubleAnimation>
       <DoubleAnimation x:Name="secondAnimation" Storyboard.TargetName="secondhandTransform" Storyboard.TargetProperty="Angle" Duration="0:1:0" RepeatBehavior="Forever" To="360"></DoubleAnimation>
      </Storyboard>
     </UserControl.Resources>

     <Grid x:Name="LayoutRoot" Loaded="SetAndStartClock" Background="White">
      <Ellipse x:Name="outerrim" Stroke="Black" Height="330" HorizontalAlignment="Left" Margin="90,74,0,0" VerticalAlignment="Top" Width="330">
       <Ellipse.Fill>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
         <GradientStop Color="Black"/>
         <GradientStop Color="Silver" Offset="1"/>
         <GradientStop Color="#FFACACAC" Offset="0.708"/>
        </LinearGradientBrush>
       </Ellipse.Fill>
      </Ellipse>
      <Ellipse x:Name="shadow" Stroke="Black" Height="330" HorizontalAlignment="Left" Margin="100,76,0,0" VerticalAlignment="Top" Width="330" Fill="#FF0C0B0B" Opacity="0.3"/>
      <Ellipse x:Name="face" Stroke="Black" Height="270" HorizontalAlignment="Left" Margin="120,103,0,0" VerticalAlignment="Top" Width="270" Fill="Black"/>
      <Ellipse x:Name="center" Stroke="#FF3ED83E" StrokeThickness="8" HorizontalAlignment="Left" Margin="240,224,0,226" Width="30"/>
      <Rectangle x:Name="secondhand" Fill="Red" Stroke="Red" Height="80" HorizontalAlignment="Left" Margin="253,139,0,0" Width="5" VerticalAlignment="Top" d:LayoutOverrides="Height" RenderTransformOrigin="0.6,1.244">
       <Rectangle.RenderTransform>
        <RotateTransform x:Name="secondhandTransform"></RotateTransform>
       </Rectangle.RenderTransform>  
      </Rectangle>
      <Rectangle x:Name="minutehand" Stroke="Green" HorizontalAlignment="Left" Margin="253,155,0,0" Width="5" StrokeThickness="8" Fill="Black" Height="60" VerticalAlignment="Top" RenderTransformOrigin="0.4,1.4">
       <Rectangle.RenderTransform>
        <RotateTransform x:Name="minutehandTransform"></RotateTransform>
       </Rectangle.RenderTransform>
      </Rectangle>
      <Rectangle x:Name="hourhand" Stroke="Green" HorizontalAlignment="Left" Margin="252,175,0,0" Width="5" Fill="Black" StrokeThickness="8" Height="40" VerticalAlignment="Top" RenderTransformOrigin="0.5,1.6">
       <Rectangle.RenderTransform>
        <RotateTransform x:Name="hourhandTransform"></RotateTransform>
       </Rectangle.RenderTransform>
      </Rectangle>
     </Grid>
    </UserControl>

    MainPage.xaml.cs:
    using System;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Ink;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;

    namespace SilverlightApplication1
    {
     public partial class MainPage : UserControl
     {
      public MainPage()
      {
       // Required to initialize variables
       InitializeComponent();
      }
      
      private void SetAndStartClock(object sender, EventArgs e)
      {

                DateTime currentDate = System.DateTime.Now;
                double hourangel = (currentDate.Hour%12)*(360/12) + currentDate.Minute / 12;
                double miniteangle = currentDate.Minute  * (360/60);
                double secondangle = currentDate.Second * (360 / 60);

                hourAnimation.From = hourangel;
                hourAnimation.To = hourangel + 360;

                minuteAnimation.From = miniteangle ;
                minuteAnimation.To = miniteangle + 360;

                secondAnimation.From = secondangle ;
                secondAnimation.To = secondangle + 360;


                clockStoryboard.Begin();
      }

     }
    }

  • 相关阅读:
    jquery 展开收缩table
    摇号系统总结
    【sqlserver】在没有数据库备份的情况下,获得操作记录信息【code】
    【sqlserver】在没有数据库备份的情况下,获得操作记录信息
    html5 canvas 学习
    layer.js 使用
    【网络公开课总结】自动搜索效果
    【网络公开课总结】会飞的小鸟,removeClass() 方法从被选元素移除一个或多个类。
    【问题解决】检索com类工厂中clsid为 10020200-E260-11CF-AE68-00AA004A34D5 的组件时失败
    【svg学习】资料收集
  • 原文地址:https://www.cnblogs.com/qixue/p/1599961.html
Copyright © 2020-2023  润新知