Shape流动效果

<Window x:Class="MvvmLight1.MainWindow"
        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"
        xmlns:localBehavior="clr-namespace:MvvmLight1"
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
        xmlns:ignore="http://www.ignore.com"
        mc:Ignorable="d ignore"
        Height="400"
        Width="600"
        Title="MVVM Light Application"
        DataContext="{Binding Main, Source={StaticResource Locator}}">

    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Skins/MainSkin.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

    <StackPanel>
        <Ellipse StrokeDashArray="2,4" Stroke="Red" StrokeThickness="3" Height="100" Width="100">
            <i:Interaction.Behaviors>
                <localBehavior:FluidBehavior FlowRate="{Binding ElementName=FlowRate,Path=Value}"
                                                 WhetherFluid="{Binding ElementName=FluidCheckBox, Path=IsChecked}"/>
            </i:Interaction.Behaviors>
        </Ellipse>
        <Rectangle StrokeDashArray="1,2" Stroke="Blue" StrokeThickness="3" Height="100" Width="100">
            <i:Interaction.Behaviors>
                <localBehavior:FluidBehavior FlowRate="{Binding ElementName=FlowRate,Path=Value}"
                                                 WhetherFluid="{Binding ElementName=FluidCheckBox, Path=IsChecked}"/>
            </i:Interaction.Behaviors>
        </Rectangle>
        <Path x:Name="MyPath"
              StrokeThickness="3"
              StrokeDashArray="5,10"
              Stroke="Black">
            <i:Interaction.Behaviors>
                <localBehavior:FluidBehavior FlowRate="{Binding ElementName=FlowRate,Path=Value}"
                                                 WhetherFluid="{Binding ElementName=FluidCheckBox, Path=IsChecked}"/>
            </i:Interaction.Behaviors>
            <Path.Data>
                <PathGeometry Figures="M 10,100 C 10,300 300,-160 300,100" />
            </Path.Data>
        </Path>
        <StackPanel>
            <CheckBox x:Name="FluidCheckBox" Content="流动效果"/>
            <Slider x:Name="FlowRate" Minimum="1" Maximum="10"/>
            <TextBlock Text="{Binding ElementName=FlowRate,Path=Value}"/>
        </StackPanel>
    </StackPanel>

</Window>

由Xaml可以看出核心就是一个FluidBehavior,效果,就不过多阐述了

最核心的就是用一个定时器对于Shape的StrokeDashOffset进行改变,其中抽象FlowRate以及WhetherFluid用于控制流动速率以及是否流动

using System;
using System.Windows;
using System.Windows.Interactivity;
using System.Windows.Shapes;
using System.Windows.Threading;

namespace MvvmLight1
{
    /// <summary>
    /// 流动行为
    /// </summary>
    public class FluidBehavior : Behavior<Shape>
    {
        #region 依赖属性

        /// <summary>
        /// 流动速度
        /// </summary>
        public int FlowRate
        {
            get { return (int)GetValue(FlowRateProperty); }
            set { SetValue(FlowRateProperty, value); }
        }

        // Using a DependencyProperty as the backing store for FlowRate.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty FlowRateProperty =
            DependencyProperty.Register("FlowRate", typeof(int), typeof(FluidBehavior), new PropertyMetadata(1));

        /// <summary>
        /// 是否流动
        /// </summary>
        public bool WhetherFluid
        {
            get { return (bool)GetValue(WhetherFluidProperty); }
            set { SetValue(WhetherFluidProperty, value); }
        }

        // Using a DependencyProperty as the backing store for WhetherFluid.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty WhetherFluidProperty =
            DependencyProperty.Register("WhetherFluid", typeof(bool), typeof(FluidBehavior), new PropertyMetadata(true, OnWhetherFluidChanged));

        private static void OnWhetherFluidChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var behavior = d as FluidBehavior;
            if (Convert.ToBoolean(e.NewValue))
            {
                behavior._timer.Start();
            }
            else
            {
                behavior._timer.Stop();
            }
        }

        #endregion

        protected override void OnAttached()
        {
            base.OnAttached();
            Fluid();
        }

        private readonly DispatcherTimer _timer = new DispatcherTimer();

        //流动
        private void Fluid()
        {
            _timer.Tick += (sender, e) =>
            {
                AssociatedObject.StrokeDashOffset -= FlowRate;
            };
            _timer.Interval = TimeSpan.FromSeconds(1d / 60);
            if (WhetherFluid)
            {
                _timer.Start();
            }
        }
    }
}
时间: 2024-08-26 05:08:05

Shape流动效果的相关文章

基于HTML5实现3D监控应用流动效果

流动效果在3D领域有着广泛的应用场景,如上图中医学领域可通过3D的流动直观的观察人体血液的流动,燃气领域可用于监控管道内流动的液体或气体的流向.流速和温度等指标. http://www.hightopo.com/guide/guide/core/lighting/examples/example_flowing.html 如今企业数据中心机房普遍面临着设备散热的问题,采用冷热通道方案可大大提高数据中心的散热能力,充分有效利用机柜和机房的空间,因此在电信的3D机房监控领域,也常需要借助流动的效果,

HT for Web中3D流动效果的实现与应用

流动效果在3D领域有着广泛的应用场景,如上图中医学领域可通过3D的流动直观的观察人体血液的流动,燃气领域可用于监控管道内流动的液体或气体的流向.流速和温度等指标. 如今企业数据中心机房普遍面临着设备散热的问题,采用冷热通道方案可大大提高数据中心的散热能力,充分有效利用机柜和机房的空间,因此在电信的3D机房监控领域,也常需要借助流动的效果,对机房冷热通道系统进行监控. Hightopo的HT for Web作为3D客户端呈现解决方案,今天介绍的重点不在于采集这些指标,而在于如何应用HT的预定于3D

拓扑图线条流动效果

图论中边是重要元素,它连接各个顶点构成拓扑图,有向图中,边具有方向性,在画布中表现为箭头,在实际应用中,边可以代表链路,链路上不只是有方向,还有流量,信号种类等信息,光用箭头表现力就不够了,可增加线条线型,以及流动效果来体现,这里介绍 Qunee 1.6 中线条流动效果的实现 虚线流动效果 虚线流动效果在 连线示例中有演示,使用虚线偏移量样式,不断增大,实现线条的流动 虚线流动代码 var offset = 0; var index = 0; var timer = setInterval(fu

线条流动效果

图论中边是重要元素,它连接各个顶点构成拓扑图,有向图中,边具有方向性,在画布中表现为箭头,在实际应用中,边可以代表链路,链路上不只是有方向,还有流量,信号种类等信息,光用箭头表现力就不够了,可增加线条线型,以及流动效果来体现,这里介绍 Qunee 1.6 中线条流动效果的实现 虚线流动效果 虚线流动效果在 连线示例中有演示,使用虚线偏移量样式,不断增大,实现线条的流动 虚线流动代码 var offset = 0; var index = 0; var timer = setInterval(fu

HTML+CSS 实现水流流动效果

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title></title> 7 <script src="/Scripts/jquery-1.10.2.mi

小程序自定义组件的制作的使用(文字流动效果示例)

组件wxml代码 <scroll-view class="container"> <view class="scrolltxt"> <view class="marquee_box"> <view class="marquee_text" style="transform: translateX(-{{marqueeDistance}}px)"> <te

android shape图形优化Button效果

android shape可以让我们通过定义xml文件的方式创建图形,当然只能实现一些比较简单的图形(圆形,矩形,椭圆,线段),但是已经相当不错了,通过shape创建的图形作为控件的背景已经基本可以满足我的简单需求了,而且通过shape创建的图形可以适配各种屏幕. 下面就用shape定义的图形来优化Button的整体效果. 定义主布局文件activity_main.xml: 1 <RelativeLayout xmlns:android="http://schemas.android.co

流动贴图需要注意的问题

比如把一张水纹图片贴在一个quad上,然后让quad各顶点的s纹理坐标随时间递增,这样实现流动效果,即各顶点的s坐标按下式计算: s=s0+time*speed 其中s0是最初的s坐标值. 但有一个问题,就是shader中纹理坐标v_texCoord精度是非常有限的,通常为mediump float,那么随着time的增加,s的值会变得很大,很快会使v_texCoord溢出,届时渲染效果会变得不正常,通常是流动效果卡顿并伴随马赛克,因此我们希望通过加减1的整数倍使纹理坐标wrap到较小的数值范围

windows api实现星空流动

实现星空流动效果 代码如下 #include<windows.h> #include<stdio.h> const int StarNum = 300; void DrawStar (HWND hwnd); int cxClient, cyClient; short arr[StarNum][3]; HDC hdc; static int num= 0; LRESULT CALLBACK WndProc(HWND hwnd, UINT message, WPARAM wParam,