В Android я хочу реализовать приведенную ниже анимацию.
Я попытался установить фон для рисования как пользовательский, упомянутый в этой ссылке. Это работает, но слева направо. Я пытался повернуть холст до 45, но он не работает .
Любая помощь будет оценена.
Пожалуйста, запустите приведенный ниже фрагмент кода и нажмите на кнопку. Вы увидите эффект анимации.
$(document).ready(function() {
var sampleButton = $(".button");
var getBody = $(document).find("body");
$(function() {
$(sampleButton).on("vmousedown", function() {
if (!$("body").hasClass("active")) {
$(getBody).addClass("has-stripe");
}
});
$(sampleButton).on("vmouseup", function() {
if (!$("body").hasClass("active")) {
$(getBody).removeClass('has-stripe');
}
});
});
});
:root {
--white: #fff;
--black: #333;
--pink: #EB5EC5;
--red: #7F5373;
}
.button {
width: 270px;
height: 270px;
border: 4px solid var(--pink);
box-shadow: inset 0 0 0 6px var(--black);
background-color: var(--pink);
background-size: 50%;
font-size: 30px;
color: white;
text-indent: -9999px;
}
body.has-stripe button.button{
border: 3px solid var(--red);
box-shadow: inset 0 0 0 6px var(--black);
background-color: var(--pink);
background: repeating-linear-gradient(
45deg,
var(--black) 5px,
var(--black) 12px,
var(--pink) 12px,
var(--pink) 22px
);
animation: unicorn 3s linear infinite;
}
@keyframes unicorn {
from { background-position: 0 0; }
to { background-position: 0 -100px; }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
<body>
<article>
<button class="button icon-animate-out"></button>
</article>
</body>