Create Canvas Animations (Tutorial)

What You'll Learn

• Draw vector graphics
• Create path animations
• Animate properties
• Build interactive animations

Prerequisites

• Display editor basics
• Understanding of process graphics

Step 1: Vector Drawing Basics

1. Open Displays → Draw
2. Use drawing tools:

Basic Shapes:

• Rectangle: Tank outline
• Ellipse: Pump body
• Line: Piping
• Polygon: Custom shapes
• Path: Complex curves

Combine Shapes:

• Select multiple
• Right-click → Combine
• Union, Subtract, Intersect

Step 2: Create Animated Fill

Build tank with level animation:

1. Draw rectangle (tank)
2. Add inner rectangle (liquid)
3. Liquid properties:
   • Fill: Blue gradient
   • Height: Bind to expression

csharp

   @Tag.Tank_Level * TankHeight / 100

1. Clip to tank bounds

Step 3: Rotation Animation

Create rotating equipment:

Pump Impeller:

1. Draw impeller shape
2. Add rotation dynamic:
   • Center: Object center
   • Angle expression:

csharp

   @Tag.Pump_Running ? @Tag.AnimationAngle : 0

1. In Scripts, increment angle:

csharp

   @Tag.AnimationAngle = (@Tag.AnimationAngle + 5) % 360;

Step 4: Path Animation

Animate object along path:

1. Draw path (invisible line)
2. Place object (e.g., product icon)
3. Add path animation:
   • Path: Select drawn path
   • Duration: 5 seconds
   • Trigger: @Tag.Conveyor_Running
   • Repeat: Continuous

Step 5: Flow Animation

Create pipe flow effect:

1. Draw pipe outline
2. Add dashed line inside
3. Animate dash offset:

csharp

   @Tag.Flow_Active ? @Tag.DashOffset : 0

1. Increment offset in script:

csharp

   @Tag.DashOffset = (@Tag.DashOffset + 2) % 20;

Step 6: Color Animations

Dynamic color changes:

State-based Color:

csharp

// Pipe color by material
Fill = @Tag.Material == "Water" ? "Blue" :
       @Tag.Material == "Oil" ? "Brown" :
       @Tag.Material == "Gas" ? "LightGray" : "White"

Gradient Animation:

• Create gradient fill
• Animate gradient stops
• Bind to temperature/pressure

Step 7: Visibility Animations

Show/hide elements:

Blinking Alarm:

csharp

Visibility = @Tag.Alarm && @Tag.BlinkState ? 
    Visibility.Visible : Visibility.Hidden

Toggle blink state every 500ms

Progressive Disclosure:

• Show details on hover
• Hide when normal
• Smooth fade transition

Step 8: Transform Animations

Scale Animation:

csharp

// Pulse effect for alarms
ScaleX = @Tag.Alarm ? 1.0 + (Math.Sin(@Tag.PulseAngle) * 0.1) : 1.0
ScaleY = ScaleX

Translation:

• Move objects based on position
• Slider controls
• Drag and drop

Step 9: Complex Equipment

Build multi-part animation:

Conveyor Belt:

1. Belt graphic with pattern
2. Product objects
3. Animations:
   • Belt pattern scrolling
   • Products moving
   • Speed variable
   • Start/stop control

Centrifuge:

1. Outer casing (static)
2. Inner drum (rotating)
3. Material flow (path animation)
4. Speed indicator

Step 10: Interactive Animations

Add user interaction:

Click Actions:

csharp

void OnValveClick()
{
    if (@Tag.Mode == "Manual")
    {
        @Tag.Valve_Position = @Tag.Valve_Position > 50 ? 0 : 100;
    }
}

Drag to Adjust:

• Implement slider behavior
• Update tag while dragging
• Show value tooltip

Performance Tips

Optimize Animations:

• Limit simultaneous animations
• Use appropriate frame rates
• Disable when not visible
• Simplify complex paths
• Cache static elements

Best Practices:

• Smooth transitions (ease-in/out)
• Consistent animation speeds
• Meaningful animations only
• Test on target hardware
• Provide animation on/off option

Advanced Techniques

Particle Effects:

csharp

// Bubbles in tank
for(int i = 0; i < 10; i++)
{
    CreateBubble(
        RandomX(), 
        TankBottom,
        RandomSize(),
        RandomSpeed()
    );
}

3D-like Effects:

• Perspective transforms
• Shadows and lighting
• Depth ordering

Next Steps

• [Working with Symbols] - Reusable animations
• [Create Dashboards] - Animated KPIs
• [Vector Graphics Drawing] - Advanced drawing