引导程序中有用的焦点覆盖

Question

我们在 iOS 中使用 Material Showcase 和在 Android 中使用 FancyShowCaseView 来提供教程式

• 显示动画
• 让用户关注特定的视图或位置

有什么我们可以用于引导程序的东西吗？我们（绝望地）查看了模态弹出框，但它们并没有很好地工作。

如果它与 jquery 兼容，它仍然可以。

我们想简单地传递一个 div 并给它“焦点”并访问某种解除回调。

有人对这类产品有任何经验吗？

Answer 1

我对你提到的两个展示不是非常熟悉，但动画可以使用 bootstrap 和 JQuery 实现，并且有多种可能性。我会在下面列出一些我知道的。

纯 CSS

纯粹的CSS Animations 是最基本的，但并不总是很优雅。

更复杂的 CSS

This 示例展示了如何获得一个简单的注意力获得眨眼动画。它可能对如何制作更复杂的 CSS 动画有所启发：

HTML：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
    <div class="row">
        <div class="container">
    <div class="row">
    <a href="#" class="intro-banner-vdo-play-btn pinkBg" target="_blank">
<i class="glyphicon glyphicon-play whiteText" aria-hidden="true"></i>
<span class="ripple pinkBg"></span>
<span class="ripple pinkBg"></span>
<span class="ripple pinkBg"></span>
</a>
    </div>
</div>

</div>

CSS：

.pinkBg {
    background-color: #ed184f!important;
    background-image: linear-gradient(90deg, #fd5581, #fd8b55);
}
.intro-banner-vdo-play-btn{
    height:60px;
    width:60px;
    position:absolute;
    top:50%;
    left:50%;
    text-align:center;
    margin:-30px 0 0 -30px;
    border-radius:100px;
    z-index:1
}
.intro-banner-vdo-play-btn i{
    line-height:56px;
    font-size:30px
}
.intro-banner-vdo-play-btn .ripple{
    position:absolute;
    width:160px;
    height:160px;
    z-index:-1;
    left:50%;
    top:50%;
    opacity:0;
    margin:-80px 0 0 -80px;
    border-radius:100px;
    -webkit-animation:ripple 1.8s infinite;
    animation:ripple 1.8s infinite
}

@-webkit-keyframes ripple{
    0%{
        opacity:1;
        -webkit-transform:scale(0);
        transform:scale(0)
    }
    100%{
        opacity:0;
        -webkit-transform:scale(1);
        transform:scale(1)
    }
}
@keyframes ripple{
    0%{
        opacity:1;
        -webkit-transform:scale(0);
        transform:scale(0)
    }
    100%{
        opacity:0;
        -webkit-transform:scale(1);
        transform:scale(1)
    }
}
.intro-banner-vdo-play-btn .ripple:nth-child(2){
    animation-delay:.3s;
    -webkit-animation-delay:.3s
}
.intro-banner-vdo-play-btn .ripple:nth-child(3){
    animation-delay:.6s;
    -webkit-animation-delay:.6s
}

MD 引导库

MD Bootstrap Library 具有更复杂的动画，这些动画易于使用，并且与纯 CSS 动画相比，所需的代码更少。 Attention Seeker 动画似乎与我在快速搜索 Material Showcase 时看到的一些动画最相似。上面的链接在一页上有很多示例，因此您可以查看支持的行为类型。

用户界面 Cookies

This site 也有许多免费和许可的引导动画示例，这些示例甚至更加复杂。