「WEB」抽屉式网页特效

们在浏览网页时或者翻转页面时，经常会看到很多精美的效果的效果。其中，抽屉式网页效果比较常见，它主要由图片和文字通过添加浪js 来实现。抽屉式网页通过移动鼠标来实现页面的切换，通过改变文字和图片而展现不同的界面，它非常实用而且实现简单。

解决方案

制作抽屉式页面时，主要会用倒忙HTML ， CSS 和 JavaScript 。

（1）通过 div 来规定主要内容部分占据的大小，并通过 CSS 来修正。

（2）使用 overflow 标签，使得多余的图片部分隐藏。

（3）通过 js 来实现图片的移动。

制作过程：

（ 1 ）为网页添加背景图片，并定义一个容器 wrap 来规定网页主要内容的大小和它占据的位置，如图 1 所示。

</div>

margin: 0;

padding: 0;

}

body{

background: url(img/sfq4.jpg) center top no-repeat;

}

#wrap{

width: 1090px;

height: 429px;

margin: 150px auto;

border: 1px solid red;

}

（ 2 ）在 wrap 里面添加 ul 列表，在列表中添加主要内容的图片和文字，并为之设置 CSS 效果。使用 overflow 属性规定当内容溢出元素框时发生的事情。在这里可以使用 overflow:hidden ，它一般用在固定宽高的 div 里面，目的是隐藏溢出使内部元素高度即使超过父元素也能够被隐藏；此外， overflow:hidden 另一个流行的用途是用在没有宽高的 div 里，其目的是清除浮动。

<ul>

<div>

<p> 我的个人浪漫之旅 || 美丽之约 </p>

</div>

</li>

<div>

<p> 我的个人浪漫之旅 || 美丽之约 </p>

</div>

</li>

<div>

<p> 我的个人浪漫之旅 || 美丽之约 </p>

</div>

</li>

<div>

<p> 我的个人浪漫之旅 || 美丽之约 </p>

</div>

</li>

</ul>

</div>

#wrap{

width: 1090px;

height: 429px;

margin: 150px auto;

overflow: hidden;// 保障图片在随鼠标移动时不会发生错位

}

#wrap ul{

width: 120%;

}

#wrap ul li{

list-style: none;

width: 100px;

height: 429px;

float: left;

}

#wrap ul li .txt{

width: 100px;

height: 429px;

background: rgba(0,0,0,0.5);

overflow: hidden;

}

#wrap ul li p{

padding: 0.5px 42px;

background: rgba(0,0,0,0.5);

color: white;

font-family: " 楷体 ";

font-size: 14px;

}

为了使图片和文字在同一水平面上，用 float 属性来清除浮动，并且用 rgba 属性来为文字改变颜色和透明度。 rgba 是代表 Red （红色） Green （绿色） Blue （蓝色）和 Alpha （不透明度）三个单词的缩写，颜色值取 0 至 250 ；透明度取值在 0 倒忙1 之间，数值越小则越透明。

（ 3 ）引入 jquery 文件，并添加 js 效果。

$('@wrap ul li').hover(function(){

$(this).stop().animate({

width : '789px'

},500).siblings().stop().animate({

width : '100px'

},500);

});

</script>

添加的 js 代码中， $('@wrap ul li').hover 表示鼠标移上图片时，被选中的图片宽度变为 789px ，用时 500 毫秒。其他的图片则用 siblings 来表示，它们的宽度在鼠标以上时变为 100px ，用时也是 500 毫秒。

效果图：

如果这篇文章对你有帮助,你现在也想学习前端开发技术的话，可以关注私信我免费领取前端学习资料，观看直播课噢！（私信方法：点击我头像进我主页右上面有个私信按钮）

篇会深化View拖拽实例，利用Flutter Animation、插值器以及AnimatedBuilder教大家实现带动画的抽屉效果。先来看效果：

通过构思，我们可以设想到实现抽屉的方式就是用Stack控件将两个Widget叠加显示，用GestureDetector监听手势滑动，动态移动顶层的Widget，当监听到手势结束的时候根据手势滑动的距离动态将顶部Widget利用动画效果滑动到结束位置即可。

实现底部Widget

class DownDrawerWidget extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return Container(child: Center(child: Text("底部Widget",),),);
 }
}

这个Widget太简单了，就不细说了。

实现顶部Widget

class UpDrawerWidget extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return Container(child: Center(child: Text("顶部Widget",),),);
 }
}

实现方式和底部是一样的。

实现可以移动的容器

上面两个Widget都是单纯用来显示的Widget，因此继承了StatelessWidget。接下来我们需要根据手势动态移动顶部的Widget，因此需要继承StatefulWidget。

// 顶部Widget
class HomePageWidget extends StatefulWidget {
 @override
 State<StatefulWidget> createState()=> HomePageState();
}
class HomePageState extends State<HomePageWidget>
 with SingleTickerProviderStateMixin {
 @override
 void initState() {...}
 @override
 void dispose() {...}
 @override
 Widget build(BuildContext context) {...}
 void _onViewDragDown(DragDownDetails callback) {...}
 void _onViewDrag(DragUpdateDetails callback) {...}
 void _onViewDragUp(DragEndDetails callback) {...}
}

初始化状态initState()

这个方法是在Widget初始化的时候系统的回调函数，我们需要在该函数中初始化动画

AnimationController controller;
@override
void initState() {
 // 初始化动画控制器，这里限定动画时常为200毫秒
 controller=new AnimationController(vsync: this, duration: const Duration(milliseconds: 200));
 // vsync对象会绑定动画的定时器到一个可视的widget，所以当widget不显示时，动画定时器将会暂停，当widget再次显示时，动画定时器重新恢复执行，这样就可以避免动画相关UI不在当前屏幕时消耗资源。
 // 当使用vsync: this的时候，State对象必须with SingleTickerProviderStateMixin或TickerProviderStateMixin；TickerProviderStateMixin适用于多AnimationController的情况。
 // 设置动画曲线，就是动画插值器
 // 通过这个链接可以了解更多差值器，https://docs.flutter.io/flutter/animation/Curves-class.html，我们这里使用带回弹效果的bounceOut。
 CurvedAnimation curve=new CurvedAnimation(parent: controller, curve: Curves.bounceOut);
 // 增加动画监听，当手势结束的时候通过动态计算到达目标位置的距离实现动画效果。curve.value为当前动画的值，取值范围0~1。
 curve.addListener(() {
 double animValue=curve.value;
 double offset=dragUpDownX - dragDownX;
 double toPosition;
 // 右滑
 if (offset > 0) {
 if (offset > maxDragX / 5) {
 // 打开
 toPosition=maxDragX;
 isOpenState=true;
 } else {
 if (isOpenState) {
 toPosition=maxDragX;
 isOpenState=true;
 } else {
 toPosition=0.0;
 isOpenState=false;
 }
 }
 } else {
 if (offset < (-maxDragX / 2.0)) {
 // 关
 toPosition=0.0;
 isOpenState=false;
 } else {
 if (isOpenState) {
 toPosition=maxDragX;
 isOpenState=true;
 } else {
 toPosition=0.0;
 isOpenState=false;
 }
 }
 }
 dragOffset=(toPosition - dragUpDownX) * animValue + dragUpDownX;
 // 刷新位置
 setState(() {});
 });
 }

结束Widget dispose()

当Widget不可用将被回收的时候，系统会回调dispose()方法，我们在这里回收动画。

@override
void dispose() {
 controller.dispose();
}

记录按下的位置

 double dragDownX=0.0;
 void _onViewDragDown(DragDownDetails callback) {
 dragDownX=callback.globalPosition.dx;
 }

拖动的时候刷新View的位置

/**
 * 最大可拖动位置
 */
 final double maxDragX=230.0;
 double dragOffset=0.0;
 void _onViewDrag(DragUpdateDetails callback) {
 double tmpOffset=callback.globalPosition.dx - dragDownX;
 if (tmpOffset < 0) {
 tmpOffset +=maxDragX;
 }
 // 边缘检测
 if (tmpOffset < 0) {
 tmpOffset=0.0;
 } else if (tmpOffset >=maxDragX) {
 tmpOffset=maxDragX;
 }
 // 刷新
 if (dragOffset !=tmpOffset) {
 dragOffset=tmpOffset;
 setState(() {});
 }
 }

离手的时候记录位置并执行动画

 /**
 * 脱手时候的位置
 */
 double dragUpDownX=0.0;
 void _onViewDragUp(DragEndDetails callback) {
 dragUpDownX=dragOffset;
 // 执行动画，每次都从第0帧开始执行
 controller.forward(from: 0.0);
 }

支持移动的Widget

@override
 Widget build(BuildContext context) {
 return Transform.translate(
 offset: Offset(dragOffset, 0.0),
 child: Container(
 child: GestureDetector(
 onHorizontalDragDown: _onViewDragDown,
 onVerticalDragDown: _onViewDragDown,
 onHorizontalDragUpdate: _onViewDrag,
 onVerticalDragUpdate: _onViewDrag,
 onHorizontalDragEnd: _onViewDragUp,
 onVerticalDragEnd: _onViewDragUp,
 child: Container(
 child: new UpDrawerWidget(),
 ),),),);}

Flutter动画

总结一下，想在Flutter中实现动画，需要先创建一个AnimationController控制器；如果有特殊的插值要求，再创建一个插值器，调用controller.forward()方法执行动画，通过addListener()的回调改变对应数值之后调用setState(() {})方法刷新位置即可。

Flutter API还提供AnimatedBuilder用来简化实现动画的复杂性，让我们不用手动调用addListener()方法。

信公众号：Dotnet9，网站：Dotnet9，问题或建议：请网站留言，如果对您有所帮助：欢迎赞赏。

.NET CORE(C#) WPF 抽屉式菜单

阅读导航

本文背景
代码实现
本文参考
源码

1. 本文背景

使用简单动画实现抽屉式菜单

2. 代码实现

使用 .NET CORE 3.1 创建名为 “AnimatedColorfulMenu” 的WPF模板项目，添加1个Nuget库：MaterialDesignThemes，版本为最新预览版3.1.0-ci948。

解决方案主要文件目录组织结构：

AnimatedColorfulMenuApp.xamlMainWindow.xaml

2.1 引入样式

文件【App.xaml】，在 StartupUri 中设置启动的视图【MainWindow.xaml】，并在【Application.Resources】节点增加 MaterialDesignThemes库的样式文件：

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Indigo.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

2.2 演示窗体布局

文件【MainWindow.xaml】，代码不多，主要看左侧菜单，启动时，菜单在显示窗体左侧-150位置；点击展开菜单，使用简单的动画，慢慢呈现在显示窗体左侧，源码如下：

<Window x:Class="AnimatedColorfulMenu.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        mc:Ignorable="d" Height="600" Width="1080" ResizeMode="NoResize" 
        WindowStartupLocation="CenterScreen" WindowStyle="None">
    <Window.Resources>
        <Storyboard x:Key="CloseMenu">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="GridMenu">
                <EasingDoubleKeyFrame KeyTime="0" Value="150"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="GridBackground">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="OpenMenu">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="GridMenu">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="150"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="GridBackground">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonClose">
            <BeginStoryboard x:Name="CloseMenu_BeginStoryboard" Storyboard="{StaticResource CloseMenu}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonOpen">
            <BeginStoryboard Storyboard="{StaticResource OpenMenu}"/>
        </EventTrigger>
    </Window.Triggers>
    <Grid>
        <Grid x:Name="GridBackground" Background="#55313131" Opacity="0"/>
        <Button x:Name="ButtonOpen" HorizontalAlignment="Left" VerticalAlignment="Top" Background="{x:Null}" BorderBrush="{x:Null}" Width="30" Height="30" Padding="0">
            <materialDesign:PackIcon Kind="Menu" Foreground="#FF313131"/>
        </Button>
        <!--左侧抽屉菜单，默认在显示窗体之外，点击菜单图标再通过简单的动画呈现出来-->
        <Grid x:Name="GridMenu" Width="150" HorizontalAlignment="Left" Margin="-150 0 0 0" Background="White" RenderTransformOrigin="0.5,0.5">
            <Grid.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Grid.RenderTransform>
            <StackPanel>
                <Image Height="140" Source="https://img.dotnet9.com/logo-foot.png" Stretch="Fill"/>
                <ListView Foreground="#FF313131" FontFamily="Champagne & Limousines" FontSize="18">
                    <ListViewItem Height="45" Padding="0">
                        <StackPanel Orientation="Horizontal" Margin="10 0">
                            <materialDesign:PackIcon Kind="Recycle" Width="20" Height="20" Foreground="Gray" Margin="5" VerticalAlignment="Center"/>
                            <TextBlock Text="回收" Margin="10"/>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem Height="45" Padding="0">
                        <StackPanel Orientation="Horizontal" Margin="10 0">
                            <materialDesign:PackIcon Kind="HelpCircleOutline" Width="20" Height="20" Foreground="#FFF08033" Margin="5" VerticalAlignment="Center"/>
                            <TextBlock Text="帮助" Margin="10"/>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem Height="45" Padding="0">
                        <StackPanel Orientation="Horizontal" Margin="10 0">
                            <materialDesign:PackIcon Kind="Lightbulb" Width="20" Height="20" Foreground="Green" Margin="5" VerticalAlignment="Center"/>
                            <TextBlock Text="发送反馈" Margin="10"/>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem Height="45" Padding="0">
                        <StackPanel Orientation="Horizontal" Margin="10 0">
                            <materialDesign:PackIcon Kind="Heart" Width="20" Height="20" Foreground="#FFD41515" Margin="5" VerticalAlignment="Center"/>
                            <TextBlock Text="推荐" Margin="10"/>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem Height="45" Padding="0">
                        <StackPanel Orientation="Horizontal" Margin="10 0">
                            <materialDesign:PackIcon Kind="StarCircle" Width="20" Height="20" Foreground="#FFE6A701" Margin="5" VerticalAlignment="Center"/>
                            <TextBlock Text="溢价认购" Margin="10"/>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem Height="45" Padding="0">
                        <StackPanel Orientation="Horizontal" Margin="10 0">
                            <materialDesign:PackIcon Kind="Settings" Width="20" Height="20" Foreground="#FF0069C1" Margin="5" VerticalAlignment="Center"/>
                            <TextBlock Text="设置" Margin="10"/>
                        </StackPanel>
                    </ListViewItem>
                </ListView>
            </StackPanel>
            <Button x:Name="ButtonClose" HorizontalAlignment="Right" VerticalAlignment="Top" Background="{x:Null}" Foreground="#CCC" BorderBrush="{x:Null}" Width="30" Height="30" Padding="0">
                <materialDesign:PackIcon Kind="Close"/>
            </Button>
        </Grid>
    </Grid>
</Window>

3.本文参考

视频一：C# WPF Material Design UI: Animated Colorful Navigation Drawer，配套源码：AnimatedColorfulMenu。
C# WPF开源控件库《MaterialDesignInXAML》

4.源码

效果图实现代码在文中已经全部给出，可直接Copy，按解决方案目录组织代码文件即可运行。

除非注明，文章均由 Dotnet9 整理发布，欢迎转载。
转载请注明本文地址：https://dotnet9.com/7397.html
欢迎扫描下方二维码关注 Dotnet9 的微信公众号，本站会及时推送最新技术文章

时间如流水，只能流去不流回！

点击《【阅读原文】》，本站还有更多技术类文章等着您哦！！！

此刻顺便为我点个《【再看】》可好？

在线咨询

上一篇：一天吸粉数十万，“黑客教父”的速成游戏
下一篇：Go语言有个“好爹”反而被程序员讨厌？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

「WEB」 抽屉式网页特效

.NET CORE(C#) WPF 抽屉式菜单

1. 本文背景

2. 代码实现

2.1 引入样式

2.2 演示窗体布局

3.本文参考

4.源码

您的项目需求

「WEB」抽屉式网页特效