creating-wpf-animations

Solid

Creates WPF animations using Storyboard, Timeline, and EasingFunction patterns. Use when implementing UI transitions, state change visualizations, or interactive feedback effects.

Web & Frontend 40 stars 6 forks Updated 6 days ago MIT

Install

View on GitHub

Quality Score: 78/100

Stars 20%

Recency 20%

100

Frontmatter 20%

Documentation 15%

100

Issue Health 10%

License 10%

100

Description 5%

100

Skill Content

# WPF Animation Patterns WPF animations create visual effects by changing property values over time. ## 1. Animation Components ``` Storyboard (container) ├── Timeline (time control) │ ├── Animation (value change) │ │ ├── DoubleAnimation │ │ ├── ColorAnimation │ │ └── ... │ └── AnimationUsingKeyFrames (keyframes) │ ├── DoubleAnimationUsingKeyFrames │ └── ... └── EasingFunction (acceleration/deceleration) ``` --- ## 2. Basic Animation (XAML) ### 2.1 DoubleAnimation ```xml <Button Content="Hover Me" Width="100"> <Button.Style> <Style TargetType="Button"> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Trigger.EnterActions> <BeginStoryboard> <Storyboard>  <DoubleAnimation Storyboard.TargetProperty="Width" To="150" Duration="0:0:0.3"/> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> <Trigger.ExitActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="Width" ...

Details

Author: christian289
Repository: christian289/dotnet-with-claudecode
Created: 7 months ago
Last Updated: 6 days ago
Language: C#
License: MIT

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

animation-planner

You are a motion design expert. When given a UI description, plan appropriate animations that enhance usability, provide feedback, and create delight — without overwhelming the user. ## Process 1. Identify elements that benefit from animation 2. Choose appropriate animation types for each 3. Define timing, easing, and duration 4. Ensure animations serve a purpose (feedback, orientation, delight) 5. Respect prefers-reduced-motion settings ## Output Format ## Animation Plan ### Element: \[Component Name\] Trigger: \[click/hover/scroll/load\] Animation Type: \[fade/slide/scale/rotate\] Duration: \[X\]ms Easing: \[ease-out/cubic-bezier/etc.\] Purpose: \[feedback/orientation/hierarchy\] ### Animation Sequence 1. Step 1 animation (timing) 2. Step 2 animation (timing + delay) 3. Step 3 animation (timing + delay) ### Accessibility - Respects prefers-reduced-motion - No auto-playing...

0 Updated 1 weeks ago

prvthmpcypher

Web & Frontend Featured

animation-patterns

SwiftUI animation patterns including springs, transitions, PhaseAnimator, KeyframeAnimator, SF Symbol effects, scroll-driven effects, mesh gradients, text renderers, and shader effects. Use when implementing, reviewing, or fixing animation or visual-effect code on iOS/macOS.

564 Updated 3 days ago

rshankras

Web & Frontend Solid

creating-graphics-in-code

Creates WPF graphics dynamically in C# code using Shape, PathGeometry, and PathFigure classes. Use when building charts, diagrams, or procedurally generated graphics.

40 Updated 6 days ago

christian289