Christina
A modern JavaScript animation utility library
Introduction
克里斯蒂娜是一个专为 Canvas 2D动画、webGL3D动画所设计的工具库。
christina.js is a animation library for Canvas & webGL.
她能完成常用的
- 数据转化
- 数据初始化
- 常用动画算法
She can help you with
- Convert data
- Initialize the data
- Commonly animation algorithm
How
npm install 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
- 类型判断
_ _ _ _ // 浮点数组判断_ // -> false // 空字符串_ // -> true _ // -> bool /** * 判断是否支持WebGL GLSL 0.93 * * @return */_ // -> bool
- 数据处理
- 数据转换
// 十六进制色转rgba // Warning! 此处非 ===_ // == 'rgba(225,158,114,.1)'_ // == 'rgba(225,158,114,.1)'_rgb // -> 'rgb(225,158,114)'_rgbArr // -> '[151,39,45]' // rbga转十六进制色_ // == '#00ff00'_'0x' // -> '0x00ff00'
- 随机数生成
//随机浮点数 min最小值 max 最大值 默认为正数_ // -> 0.002 //随机整数 默认为0-100_ // -> 25 /** * 生成一组平滑的随机数,根据数量,将随机数均匀的分布 * * @param * @param * @return */_ // -> [0,2.5,4.5,7.2.9.8]
- 数据处理
/** * 数字映射 * * @param * @param * @param * @param * @param * @return */_) // -> 80 /** * float32类型的array.concat * * @param * @param * @return */ _ // -> new Float32Array([1,2,3,4,5,6]) _
- 算法
- 几何计算
/** * 勾股定理计算 * * @param * @param * @param * @return */_ // -> 5_ // -> 3 /** * 三维矩阵变换 * @param * @param * @param * @param * @param * @return {x:number,y:number,z:number} */ // js语言精度问题可能为-0.99999,有一定误差不影响动画制作_ // -> {x:1,y:-1,z:1} /** * 空间中两点距离 * @param x1 * @param x2 * @param y1 * @param y2 * @param z1 * @param z2 * @returns */_ // -> Math.sqrt(17)