veloticy-ui를 사용하여 텍스트 애니메이션을 생성하는 방법
이번에는 veloticy-ui를 사용하여 텍스트 애니메이션을 생성하는 방법과 veloticy-ui를 사용하여 텍스트 애니메이션을 생성할 때 어떤 노트가 있는지 보여드리겠습니다. 실제 사례를 살펴보겠습니다.
머리말
최근에는 텍스트 물결선과 유사한 효과를 얻고 싶었습니다. 첫인상은 사용하기 간단하고 코드 양이 적다는 것입니다. 사용 방법에 대한 간략한 소개와 멋진 애니메이션을 구현합니다.
구체적인 사용법은 여기를 클릭하세요
속도를 사용하려면- ui, 먼저 속도를 도입해야 합니다. 여기서 속도는 jquery에 의존할 수 있습니다. 또는 jquery에 의존하지 않습니다. 아래 세부 정보를 살펴보세요//不依赖jquery，第一个参数为原生js的dom选择器
Velocity(document.getElementById("dummy"), {
opacity: 0.5
}, {
duration: 1000
});
// 使用 jQuery 或 Zepto 时
$("#dummy").velocity({
opacity: 0.5
}, {
duration: 1000
});
$element.velocity({
width: "500px", // 动画属性 宽度到 "500px" 的动画
property2: value2 // 属性示例
}, {
/* Velocity 动画配置项的默认值 */
duration: 400, // 动画执行时间
easing: "swing", // 缓动效果
queue: "", // 队列
begin: undefined, // 动画开始时的回调函数
progress: undefined, // 动画执行中的回调函数（该函数会随着动画执行被不断触发）
complete: undefined, // 动画结束时的回调函数
display: undefined, // 动画结束时设置元素的 css display 属性
visibility: undefined, // 动画结束时设置元素的 css visibility 属性
loop: false, // 循环
delay: false, // 延迟
mobileHA: true // 移动端硬件加速（默认开启）
});
width: ["500px", "300px"]//这样设置后面的300px会作为初始默认值
width: ["500px", "spring"，"300px"]//这样可以为单个属性指定缓动函数
width: function (index, total) {}//对集合对象可以设置不同的属性值스크롤, 마무리 및 역방향을 포함하여 애니메이션을 구현하기 위한 몇 가지 지침을 제공합니다. 또한 Velocity는 변환 및 색상과 같은 속성 애니메이션에 대한 지원을 구현하고 SVG 및 Promise를 지원합니다. 특히 위에 링크된 문서를 사용하세요. velocity-ui 더 많은 지침을 제공하는 것 외에도 RunSequence 및 RegisterEffect 두 가지 메서드도 제공합니다(jquery가 아닌 경우 $.를 제거하고 jquery를 기본 DOM으로 대체할 수 있음)
// 将嵌套动画序列储存到一个数组里，很清晰的显示了它们的执行顺序
var mySequence = [
{ e: $element1, p: { translateX: 100 }, o: { duration: 1000 } },
{ e: $element2, p: { translateX: 200 }, o: { duration: 1000 } },
{ e: $element3, p: { translateX: 300 }, o: { duration: 1000 } }
];
// 调用这个自定义的序列名称 还可以在其他地方复用
$.Velocity.RunSequence(mySequence);
// name：动画特效名称 为字符串类型
// defaultDuration：默认动画执行时间 单位为毫秒(ms)
// calls：动画队列数组，property - 动画属性，durationPercentage - 当前动画所占总时间的百分比 (写成浮点数)，option - 选项
// reset：设置元素在动画开始时的初始值
$.Velocity.RegisterEffect(name, {
defaultDuration: duration,
calls: [
[ { property: value }, durationPercentage, { options } ],
[ { property: value }, durationPercentage, { options } ]
],
reset: { property: value, property: value }
});<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="renderer" content="webkit">
<title>Document</title>
</head>
<body>
<h1 id="J_Text">segmentfault</h1>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/velocity/1.5.1/velocity.min.js"></script>
<script src="https://cdn.bootcss.com/velocity/1.5.1/velocity.ui.min.js"></script>
<script>
jQuery(function ($) {
$.Velocity.RegisterEffect('custom', {//注册一个叫'custom'自定义动画
defaultDuration: 1500,
calls:[
[{
rotateY: 360,
translateY: '-=15',
}, 0.5],
[{
translateY: '+=15',
}, 0.5]
],
})
$('#J_Text').css({
fontSize: 40,
color: '#333',
}) .html(function () {
return $(this).text().split('').map(function (char) {
return '<span>' + char + '</span>'; //让每字符被span元素包裹
}).join('');
}).find('span')
.filter(function (index) {
return index > 6
}).css('color', '#009A63').end() //让后面几个字符变为绿色
.css({
position: 'absolute',
left: function (index) {
return index * 20; //设置字符的间隔
}
})
.velocity('custom', { //调用自定义的动画指令
stagger: 300,
delay: 1000,
})
})
</script>
</body>
</html>일부 캐릭터 작업을 제거하면 겉보기에 복잡해 보이는 애니메이션을 구현하려면 간단히 호출을 설정하려면 이 gif는 애니메이션을 루프로 재생하는 것만으로도 충분합니다. 실제로 이 애니메이션은 전체 대기열의 루프를 구현하는 방법을 생각해 볼 수 있습니다.
마지막으로
Velocity는 애니메이션을 내부적으로 제어합니다. 성능면에서 최적화되었기 때문에 성능은 jquery의 animate보다 좋고, CSS의 Transition보다 더 좋습니다. 물론 이건 테스트해보지는 않았으니 테스트해보시면 됩니다. .
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 추천 자료:
jquery+css3을 사용하여 생방송 플랫폼 탐색
마우스 반응형 Taobao 애니메이션 효과 구현
위 내용은 veloticy-ui를 사용하여 텍스트 애니메이션을 생성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
PPT에서 둥근 그림과 텍스트를 만드는 방법
Mar 26, 2024 am 10:23 AM
먼저 PPT에 원을 그린 후 텍스트 상자를 삽입하고 텍스트 내용을 입력합니다. 마지막으로 텍스트 상자의 채우기와 윤곽선을 없음으로 설정하면 원형 그림과 텍스트 제작이 완료됩니다.
Word에서 텍스트에 점을 추가하는 방법은 무엇입니까?
Mar 19, 2024 pm 08:04 PM
매일 Word 문서를 만들 때 문서의 특정 단어 아래에 점을 추가해야 하는 경우가 있습니다. 특히 시험 문제가 있는 경우에는 더욱 그렇습니다. 콘텐츠의 이 부분을 강조하기 위해 편집자는 Word에서 텍스트에 점을 추가하는 방법에 대한 팁을 공유할 것입니다. 도움이 되기를 바랍니다. 1. 빈 워드 문서를 엽니다. 2. 예를 들어 "텍스트에 점을 추가하는 방법"이라는 단어 아래에 점을 추가합니다. 3. 먼저 마우스 왼쪽 버튼으로 "텍스트에 점을 추가하는 방법"이라는 단어를 선택합니다. 나중에 해당 단어에 점을 추가하려면 먼저 마우스 왼쪽 버튼을 사용하여 원하는 단어를 선택해야 합니다. . 오늘 우리는 이 단어들에 점을 추가할 것이므로 여러 단어를 선택했습니다. 해당 단어를 선택하고 마우스 오른쪽 버튼을 클릭한 후 팝업 기능 상자에서 글꼴을 클릭합니다. 4. 그러면 이와 같은 것이 나타날 것입니다
Python을 사용하여 두 날짜 사이에 k개의 임의 날짜를 생성하는 방법은 무엇입니까?
Sep 09, 2023 pm 08:17 PM
데이터 과학 분야에서 무작위 데이터를 생성하는 것은 매우 중요합니다. 신경망 예측 구축, 주식 시장 데이터 등에서는 일반적으로 날짜가 매개 변수 중 하나로 사용됩니다. 통계 분석을 위해 두 날짜 사이에 난수를 생성해야 할 수도 있습니다. 이 기사에서는 random 및 datetime 모듈을 사용하여 주어진 두 날짜 사이에 k개의 무작위 날짜를 생성하는 방법을 보여줍니다. Datetime은 시간 처리를 위한 Python의 내장 라이브러리입니다. 반면에, Random 모듈은 난수를 생성하는 데 도움이 됩니다. 따라서 무작위 모듈과 날짜/시간 모듈을 결합하여 두 날짜 사이의 무작위 날짜를 생성할 수 있습니다. 여기서 구문 random.randint(start, end, k) random은 Python 무작위 라이브러리를 나타냅니다. randint 방법은 세 가지 중요한 방법을 사용합니다.
Golang 이미지 처리: 워터마크 및 텍스트를 추가하는 방법 알아보기
Aug 17, 2023 am 08:41 AM
Golang 이미지 처리: 워터마크 및 텍스트 인용문을 추가하는 방법 알아보기: 현대 디지털화 및 소셜 미디어 시대에 이미지 처리는 중요한 기술이 되었습니다. 개인용이든 비즈니스 운영이든 워터마크와 텍스트를 추가하는 것은 일반적인 요구 사항입니다. 이번 글에서는 이미지 처리에 Golang을 사용하는 방법과 워터마크 및 텍스트를 추가하는 방법을 알아봅니다. 배경: Golang은 간결한 구문, 효율적인 성능 및 강력한 동시성 기능으로 알려진 오픈 소스 프로그래밍 언어입니다. 많은 발전의 대상이 되었습니다
사진의 텍스트를 수정하는 방법
Aug 29, 2023 am 10:29 AM
이미지 편집 소프트웨어, 온라인 도구 또는 스크린샷 도구를 사용하여 이미지의 텍스트를 수정할 수 있습니다. 구체적인 단계는 다음과 같습니다. 1. 그림 편집 소프트웨어를 열고 수정해야 하는 그림을 가져옵니다. 2. 텍스트 도구를 선택합니다. 3. 그림의 텍스트 영역을 클릭하여 텍스트 상자를 만듭니다. 5. 그림의 텍스트만 삭제하려면 지우개 도구나 선택 도구를 사용하여 텍스트 영역을 선택하고 삭제할 수 있습니다.
PHP를 사용하여 새로 고칠 수 있는 이미지 확인 코드를 생성하는 방법
Sep 13, 2023 am 11:54 AM
PHP를 사용하여 새로 고침 가능한 이미지 확인 코드를 생성하는 방법 인터넷이 발달하면서 악의적인 공격과 자동 기계 작동을 방지하기 위해 많은 웹사이트에서 사용자 확인을 위해 확인 코드를 사용하고 있습니다. 일반적인 확인 코드 유형 중 하나는 이미지 확인 코드로, 임의의 문자가 포함된 그림을 생성하고 사용자가 계속 진행하기 전에 올바른 문자를 입력하도록 요구합니다. 이 문서에서는 PHP를 사용하여 새로 고칠 수 있는 이미지 확인 코드를 생성하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1단계: 인증 코드 이미지 생성 먼저 인증 코드 이미지를 생성해야 합니다.
Python에서 pyWaffle을 사용하여 와플 차트 생성
Aug 17, 2023 am 11:49 AM
효율적인 정보 이해와 표현을 위해서는 데이터 시각화가 필수적입니다. 사용 가능한 다양한 차트 유형 중에서 와플 차트는 정사각형 타일이 있는 격자형 구조로 데이터를 표시하는 새로운 방법입니다. 강력한 Python 모듈인 PyWaffle은 많은 계산 및 데이터 분석 방법과 유사한 와플 차트 개발을 용이하게 합니다. 이 기사에서는 정교한 Python 모듈인 PyWaffle을 사용하여 와플 차트를 만드는 방법을 살펴보겠습니다. PyWafle을 설치하고 이를 사용하여 범주형 데이터를 시각화하는 방법을 살펴보겠습니다. cmd에서 다음 명령을 실행하여 라이브러리를 설치한 다음 이를 코드로 가져옵니다. pipinstallpywaffleExample1의 중국어 번역은 다음과 같습니다. 예 1 이 예에서는
PHP를 사용하여 기본적인 자연어 생성을 수행하는 방법
Jun 22, 2023 am 11:05 AM
자연어 생성은 데이터를 자연어 텍스트로 변환하는 인공지능 기술이다. 오늘날의 빅데이터 시대에는 데이터를 시각화하거나 사용자에게 제시해야 하는 기업이 점점 더 많아지고 있으며, 자연어 생성은 매우 효과적인 방법입니다. PHP는 웹 애플리케이션을 개발하는 데 사용할 수 있는 매우 널리 사용되는 서버측 스크립팅 언어입니다. 이 기사에서는 기본적인 자연어 생성을 위해 PHP를 사용하는 방법을 간략하게 소개합니다. 자연어 생성 라이브러리 소개 PHP와 함께 제공되는 함수 라이브러리에는 자연어 생성에 필요한 함수가 포함되어 있지 않으므로
