MotorCortex-LeonSans

Table of Contents

MotorCortex-LeonSans
- Demo
Intro / Features
Getting Started
- Installation
- Importing and Loading
Creating Incidents
- LeonSans Clip
- LeonIncident
Adding Incidents in your clip
Contributing
License
Sponsored by

Demo

Intro / Features

MotorCortex-LeonSans brings some capabilities of LeonSans library into MotorCortex. With LeonSans plugin you can render exquisite text anywhere in your clip.

This Plugin exposes two Incidents:

LeonSans Clip
LeonIncident

Getting Started

Installation

$ npm install --save @donkeyclip/motorcortex-leonsans
# OR
$ yarn add @donkeyclip/motorcortex-leonsans

Importing and loading

import { loadPlugin } from "@donkeyclip/motorcortex/";
import LeonPlugin from "@donkeyclip/motorcortex-leonsans";
const LeonSans = loadPlugin(LeonPlugin);

Creating Incidents

LeonSans Clip

By the use of the plugin's Clip you can render a canvas which will host your text.

The Clip takes a number of attributes (listed below) that define both the canvas and the rendered text characteristics and it can accept an unlimited number of LeonSans Incidents that can animate the rendered text.

Example

const clipName = new LeonSans.Clip(
  {
    canvasId: "leonObj",
    sw: 800,
    sh: 600,
    text: "abcdefghijklmn\nopqrstuvwxyz",
    weight: 100,
    round: true,
    multiply: true,
    drawing: "colorful",
    color: [["#64d3ce", "#2a92ce82", "#2a92ce40", "#2a92ce2e", "#2a92ce00"]],
    colorful: ["#64d3ce", "#2a92ce82", "#2a92ce40", "#2a92ce2e", "#2a92ce00"],
    pathGap: -1,
    patternWidth: 1,
    patternHeight: 10,
    speed: 1,
    tracking: 20,
    leading: 10,
    size: 80,
  },
  {
    selector: ".test",
  }
);

LeonSans Clip Attrs

Name	Are	Values
canvasId	the id of the rendered canvas that contains the text. This id will be used by all `LeonIncident` Incidents, added to the `Clip` timeline, via their `selector` property	string
sw	width of clip canvas (how many pixels)	all positive numbers
sh	height of clip canvas (how many pixels)	all positive numbers
text	the text to display	string
weight	The weight of the font	number 1 - 900
round	round the corners of font if they are not path	boolean
multiply	applying multiply effect when the font has more then 1 colors	boolean
drawing	type of the font effect	one of: `drawing`, `pattern`, `colorful`, `colorPattern`
color	The colors of the characters	array of arrays of colors
colorful	The list of colors of each character. Only applicable if drawing property is `colorfull`	array of colors
pathGap	The gap between each coordinate of the points on a line of each character	number
patternWidth:	the width of the lines when drawing property is `pattern`	number
patternHeight	the height of the lines when drawing property is `pattern`	number
speed	speed of color changing when drawing property is `colorPattern`	number, from 0 to 10
tracking	The spacing between the characters of a block of text	number
leading	The distance between each line of text	number
size	size of text	number

LeonIncident

Example

const nameOfIncident = new LeonSans.LeonIncident(
  {
    animatedAttrs: {
      LeonAtrs: {
        completion_rate: 1,
        weight: 600,
        // tracking: 20,
        leading: 10,
        // size: 90,
        // pathGap: 1,
        patternWidth: 100,
        // patternHeight: 90
      },
    },
    initialValues: {
      LeonAtrs: {
        completion_rate: 0,
        weight: 100,
        // tracking: 10,
        // leading: 1,
        size: 80,
        // pathGap: 0,
        patternWidth: 1,
        // patternHeight: 10
      },
    },
  },
  {
    duration: 2000,
    selector: "!#leonObj",
  }
);

LeonIncident Attrs

The LeonIncident attrs takes on the animatedAttrs object just one composite attribute: LeonAtrs. The supported attributes of this composite attribute are:

Name	Are	Values
completion_rate	The rate of text completion	num from 0 to 1
weight	The weight of the font: 1 - 900	number
pathGap	The gap between each coordinate of the points on a line of each character	number
patternWidth:	the width of the lines when drawing property is `pattern`	number
patternHeight	the height of the lines when drawing property is `pattern`	number
tracking	The spacing between the characters of a block of text	number
leading	The distance between each line of text	number
size	size of text	number

IMPORTANT

Along with the attributes, all LeonIncident incidents must take on their props the selector key which targets the canvas id of their parent Clip via the convention: !#<canvasId>

Adding Incidents in your clip

clipName.addIncident(incidentName,startTime);

Contributing

In general, we follow the "fork-and-pull" Git workflow, so if you want to submit patches and additions you should follow the next steps:

Fork the repo on GitHub
Clone the project to your own machine
Commit changes to your own branch
Push your work back up to your fork
Submit a Pull request so that we can review your changes

License

MIT License

donkeyclip / motorcortex-leonsans Goto Github PK