Welcome to Wusun Editor!
This animation editor allows you to create frame-by-frame animations using various shapes, text, and images. You can control properties like color, opacity, blur, glow, and even gradients for your elements.
Project Management:
- New Project: Start a fresh animation.
- Save Project: Download your current animation as a JSON file.
- Load Project: Upload a previously saved JSON file to continue your work.
Export Options:
- Export Current Frame (PNG): Save the currently displayed frame as an image.
- Export Animation (GIF): Export your entire animation as an animated GIF.
- Export Animation (WebM): Export your animation as a WebM video. WebM is a high-quality, open format that can be directly recorded from the browser. If you need to convert it to MP4, you can use online converters (e.g., CloudConvert, Zamzar) or desktop video editing software.
Canvas Settings:
- Adjust the Width and Height of your animation canvas.
Frame Controls:
- Add Frame: Adds a new frame, copying all elements from the current frame to the new one.
- Delete Frame: Deletes the current frame. You must have at least one frame.
- Play Animation: Play through your frames.
- Stop: Stop the animation playback.
- Copy Frame: Copies the entire content of the current frame.
- Paste Frame: Pastes the copied frame content as a new frame after the current one.
- Show Onion Skin: Toggle visibility of previous and next frames at reduced opacity for easier animation alignment.
- Animation Speed: Adjust the playback speed of your animation in milliseconds per frame.
Drawing Shapes:
Select a drawing tool (Circle, Square, Line, Text) and then click and drag on the canvas to create your shape. For Text, just click to place it.
- Draw Circle: Click and drag to define the circle's center and radius.
- Draw Square: Click and drag to define the square's two opposite corners.
- Draw Line: Click and drag to draw a line from start to end.
- Draw Text: Click once to place text; edit its properties in the sidebar.
- Add Uploaded Image: Upload an image first, then click this button to place it on the canvas.
Object Management:
Click on shapes on the canvas to select them. Hold Shift or Ctrl/Meta while clicking to select multiple shapes. Click and drag outside any shape to draw a selection rectangle.
- Delete Selected: Remove the currently selected shape(s).
- Copy Selected Shape(s): Copy the selected shape(s).
- Paste Shape(s): Paste the copied shape(s) onto the canvas.
- Bring to Front: Moves selected shapes to the top layer.
- Send to Back: Moves selected shapes to the bottom layer.
Selected Shape Properties:
When a shape is selected, its properties appear in this section. You can adjust:
- Color / Gradient: Apply a solid color or a linear/radial gradient.
- Opacity: Change the transparency.
- Line Thickness: Adjust the width of lines and shape outlines.
- Fill Shape: Toggle filling for circles and squares.
- Draw Outline: Add an outline with adjustable color and thickness.
- Blur: Apply a blur effect.
- Glow Effect: Add a glowing aura with adjustable color and strength.
- Shape Rotation: Rotate the selected shape(s). You can also use Shift + Arrow Left/Right on the keyboard to nudge rotation.
- Dimensions (New): Directly view and edit the X, Y coordinates, and size (Radius, Width, Height, X2, Y2) of the selected shape.
- Image Tint (New): For image shapes, apply a color tint with adjustable color and opacity.
For text shapes, additional properties are available:
- Text: Edit the text content.
- Font Family: Choose from a wide selection of fonts.
- Font Size: Adjust the text size.
- Bold / Italic: Apply bold or italic styles.
Keyboard Shortcuts:
- Arrow Keys: Nudge selected shape(s) by 5px.
- Shift + Right Mouse: Add/remove shapes from current selection and move them.
- Right Mouse (on empty space): Start a new rectangle selection (additive to current selection).
- Right Mouse: Move shapes and stretch Line shapes.