Christina

A modern JavaScript animation utility library

Introduction

克里斯蒂娜是一个专为 Canvas 2D动画、webGL3D动画所设计的工具库。

christina.js is a animation library for Canvas & webGL.

她能完成常用的

1. 数据转化
2. 数据初始化
3. 常用动画算法

She can help you with

1. Convert data
2. Initialize the data
3. Commonly animation algorithm

How

npm install christina
 
import _ from 'christina'

Why is Christina

克里斯蒂娜是动画《命运石之门》中男主角的助手——牧濑红莉栖的别称。她协助完成了时间机器。

Christina is the role of the animation "Steins;Gate". Makise Kurisu helped finish the time machine.

希望Christina.js也能像助手一样帮助你构建你的动画世界。

I hope Christina.js can help you build your own animated world just as much as an assistant.

How to use

TL;DR

我们推荐直接看测试用例这样了解更加直观 I recommend looking at the test case to find out

• 类型判断

_.isArray()
 
_.isString() 
 
_.isObject() 
 
_.isFunction()
 
// 浮点数组判断
_.isFloat32Array([]) // -> false 
 
// 空字符串
_.isNullString("") // -> true 
 
_.isIE() // -> bool
 
/**
 * 判断是否支持WebGL GLSL 0.93
 *
 * @return {bool} 当前浏览器是否支持
 */
_.canWebGL() // -> bool

• 数据处理

1. 数据转换

// 十六进制色转rgba 
// Warning! 此处非 ===
_.hexToRgba('#FF9E72',.1) // == 'rgba(225,158,114,.1)'
_.hexToRgba('0xFF9E72',.1) // == 'rgba(225,158,114,.1)'
_.hexToRgba('#FF9E72',.1).rgb // -> 'rgb(225,158,114)'
_.hexToRgba('0xFF9E72',.1).rgbArr // -> '[151,39,45]'
 
// rbga转十六进制色
_.rgbToHex([0,255,0]) // == '#00ff00'
_.rgbToHex([0,255,0])['0x'] // -> '0x00ff00'

1. 随机数生成

 
//随机浮点数 min最小值 max 最大值 默认为正数
_.random(min,max) // -> 0.002
 
//随机整数 默认为0-100
_.randomInt(min,max) // -> 25
 
/**
 * 生成一组平滑的随机数，根据数量，将随机数均匀的分布
 * 
 * @param {string} count 需要生成几个数据
 * @param {number} bits 需要保留几位小数
 * @return {Array} 对应的数组
 */
_.smoothRandom(count,bits) // -> [0,2.5,4.5,7.2.9.8]

1. 数据处理

/**
 * 数字映射
 * 
 * @param {number} origin 提供数据
 * @param {number} oriStart 数据起点
 * @param {number} oriEnd 数据重点
 * @param {number} tarStart 映射数据起点
 * @param {number} tarEnd 映射数据终点
 * @return {number} 映射数据
 */
_.analogy(3,-5,5,0,100)) // -> 80
 
/**
 * float32类型的array.concat
 * 
 * @param {Float32Array} first 连接数组A
 * @param {Float32Array} second 连接数组B
 * @return {Float32Array} 
 */
 
_.float32Concat([1,2,3],new Float32Array([4,5,6])) // -> new Float32Array([1,2,3,4,5,6])
 
_.float32ToArray(new Float32Array([4,5,6]) // -> [4,5,6]
 
/**
 * 数组堆叠 将数组循环顺序堆叠于一个指定长度的数组
 * 
 * @param {number} maxLength 目标长度
 * @param {array} origin 源数组
 * @return {*} 结果数组
 */
 
_.arrayStacked(6,[1,2,3]) // -> [1,2,3,1,2,3]

• 算法

1. 几何计算

/**
 * 勾股定理计算
 * 
 * @param {number} side1 邻边A
 * @param {number} side2 邻边B
 * @param {number} hypotenuse 斜边
 * @return {number} 第三边
 */
_.pythagoras(3,4) // -> 5
_.pythagoras(null,4,5) // -> 3
 
/**
 * 三维矩阵变换
 * @param {string} type 饶哪个轴旋转
 * @param {number} angle 旋转角度
 * @param {num} x 坐标
 * @param {num} y 坐标
 * @param {num} z 坐标
 * @return {x:number,y:number,z:number}
 */
 
// js语言精度问题可能为-0.99999，有一定误差不影响动画制作
_.matrix3DRotate('x',Math.PI / 2,1,1,1) // -> {x:1,y:-1,z:1}
 
/**
 * 空间中两点距离
 * @param x1
 * @param x2
 * @param y1
 * @param y2
 * @param z1
 * @param z2
 * @returns {number} 
 */
_.distancePoint(1,5,1,1,1,2) // -> Math.sqrt(17)