时间:2023-06-23 23:57:02 | 来源:网站运营
时间:2023-06-23 23:57:02 来源:网站运营
手把手教你撸一个能生成抖音风格动图的gif制作平台:<div className={styles.editorArea}> <div className={styles.formItem}> <span className={styles.label}>文字: </span> <Input value={value['text']} placeholder="请输入文本内容" onChange={(e) => onChange('text', e)} /> </div> <div className={styles.formItem}> <span className={styles.label}>大小: </span> <InputNumber value={value['fontSize']} placeholder="请输入文本大小" onChange={(e) => onChange('fontSize', e)} /> </div> <div className={styles.formItem}> <span className={styles.label}>文字颜色: </span> <Color value={value['textColor'][0]} onChange={(e) => onChange('textColor', e, 1)} /> <Color value={value['textColor'][1]} onChange={(e) => onChange('textColor', e, 2)} /> </div> <div className={styles.formItem}> <span className={styles.label}>背景色: </span> <Color value={value['themeColor']} onChange={(e) => onChange('themeColor', e)} /> </div> <div className={styles.formItem}> <span className={styles.label}></span> <Button type="primary" onClick={generateGif}>导出Gif</Button> {/* <Button style={{marginLeft: '20px'}} onClick={reset}>重置</Button> */} </div></div>
大家可以不用太关注代码细节, 你可以使用任何熟悉的方式去开发, 表单编辑器主要是实现和预览区域的互通, 在react里我们用hooks组件的useState来和Blink组件互通, vue的话可以直接用data或者vuex解决问题, 具体如下图实现: import React, { useRef, useEffect } from 'react'import './index.less'export default function Blink(props) { const { text = '趣谈前端', fontSize = '48px', themeColor = '#000', textColor = ['#74fcfd', '#ea3448'], onRef } = props const ref = useRef(null) useEffect(() => { onRef && onRef(ref) }, []) return ( <div className='blink' style={{backgroundColor: themeColor}} ref={ref}> <div className="blink-item" data-text={text} style={{fontSize: fontSize}}> <div className="text text-front" style={{color: textColor[0]}}>{text}</div> <div className="text text-back" style={{color: textColor[1]}}>{text}</div> </div> </div> )}
至于样式问题, 笔者在github里有详细的介绍, 这里就不详细说明了. 所以说我们在项目中实现预览也很简单, 直接引入组件即可:<Blink {...value} onRef={(ref) => { blinkRef.current = ref.current}} />
value就是form表单的配置产物.const generateImg = (node, imgId, time) => { return new Promise((resolve, reject) => { setTimeout(() => { domtoimage.toPng(node) .then(function (dataUrl) { let img = new Image(); img.src = dataUrl; img.id = imgId; img.className = 'imgPiece'; document.getElementById('imgBox').appendChild(img); resolve(document.getElementById(imgId)); }) .catch(function (error) { reject(error); }); }, time) }) }
其次我们使用promise.all来将图片统一收集传给gif.js对象:const generateGif = () => { document.getElementById('imgBox').innerHTML = ''; let blink = blinkRef.current; let promiseArr = []; for(let i=0, len=24; i < len; i++) { promiseArr.push(generateImg(blink, `img${i+1}`, 16 * i)); } Promise.all(promiseArr).then(res => { if(res) { let w = res[0].width; let h = res[0].height; // res即为所有的img集合, 可以直接传给gif.js ... }); } }) }
关于gif.js的使用方法, 官网里也有详细的介绍, 这里笔者不一一举例了, 感兴趣的朋友可以研究一下.saveAs(image, `${uuid(6, 10)}.gif`);
image即是gif.js或者其他动图插件生成的gif图片, uuid主要是给图片命名. 大家可以亲自在平台体验: 关键词:风格,平台,把手